/* 設定 › 已配對的手機(spec mchat-phone-surfaces §4.2)。容器、列、底線文字鈕沿用同頁的
   「已授權的電腦」(devices.css);全頁只有列與列之間那一種線。 */
#box_phones {
  border: 1px var(--color-greyLight) solid;
  border-radius: var(--radius-lg);
  padding: var(--space-32);
}

#box_phones .ph-msg {
  margin: var(--space-12) 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-greyMedium);
}

#box_phones .ph-msg:empty {
  display: none;
}

#box_phones .ph-msg.is-err {
  color: var(--color-redText);
}

/* 鈕、面板、清單之間 24;沒有手機時整塊只有那顆鈕 */
#box_phones .ph-panel,
#box_phones #ph_body.is-wait,
#box_phones .ph-rows:not([hidden]),
#box_phones #ph_error:not([hidden]) {
  margin-top: var(--space-24);
}

/* ---------- Outlined control(canon),同 devices.css 的 .dv-retry ---------- */
#box_phones .ph-out {
  position: relative;
  height: 34px;
  padding: 0 var(--space-16);
  border: 1px solid var(--color-greyLight);
  border-radius: var(--radius-xs);
  background-color: transparent;
  color: var(--color-black);
  font-size: 14px;
  white-space: nowrap;
  transition: background-color var(--motion-fast) var(--ease-standard);
}

/* 熱區補到 44:視覺框 34,上下各外擴 6 */
#box_phones .ph-out::before {
  content: "";
  position: absolute;
  inset: -6px 0;
}

#box_phones .ph-out:hover:not([aria-disabled="true"]),
#box_phones .ph-out[aria-expanded="true"] {
  background-color: var(--color-greyLight);
}

/* 名額滿:aria-disabled(canon › Disabled › 上限型選取),按了才說原因 */
#box_phones .ph-out[aria-disabled="true"] {
  color: var(--color-greyLightMedium);
  cursor: not-allowed;
}

/* ---------- 底線文字鈕:同 .dv-revoke(負 margin 換 44 觸控) ---------- */
#box_phones .ph-link {
  border: 0;
  background: none;
  padding: var(--space-12);
  margin: -12px;
  font-size: 14px;
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-standard);
}

#box_phones .ph-revoke:hover:not(:disabled) {
  color: var(--color-redText);
}

#box_phones .ph-link:disabled {
  color: var(--color-greyLightMedium);
  cursor: not-allowed;
}

/* ---------- 配對面板 ---------- */
#box_phones .ph-panel {
  padding: calc(var(--space-16) + var(--space-4));
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

#box_phones .ph-panel p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-greyMedium);
}

#box_phones .ph-panel .ph-st.is-err {
  color: var(--color-redText);
}

#box_phones .ph-panel .ph-st:empty {
  display: none;
}

#box_phones .ph-st .ph-link {
  margin: -12px -12px -12px -8px;
}

#box_phones .ph-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  margin-top: var(--space-12);
}

#box_phones .ph-st:empty + .ph-field {
  margin-top: 0;
}

#box_phones .ph-field[hidden] {
  display: none;
}

/* canon › Input:44 高、radius md */
#box_phones .ph-input {
  width: 160px;
  height: 44px;
  padding: 0 var(--space-12);
  border: 1px solid var(--color-greyLight);
  border-radius: var(--radius-md);
  background-color: var(--color-pureWhite);
  color: var(--color-black);
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.2em;
}

/* ID 選擇器壓過 main.css 的 input:disabled,停用色要在這裡重寫 */
#box_phones .ph-input:disabled {
  background-color: var(--color-greyLight);
  color: var(--color-greyMedium);
  border-color: var(--color-greyLight);
  cursor: not-allowed;
}

#box_phones .ph-input::placeholder {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--color-greyLightMedium);
}

/* 跟驗證碼欄同高 */
#box_phones .ph-solid {
  height: 44px;
  padding: 0 var(--space-16);
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--color-black);
  color: var(--color-pureWhite);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

#box_phones .ph-solid:disabled {
  background-color: var(--control-disabled-fill);
  color: var(--control-disabled-fill-text);
  cursor: not-allowed;
}

#box_phones .ph-pair {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

#box_phones .ph-pair[hidden] {
  display: none;
}

/* 白底板亮暗同值、不反相(desktop-phone-chat-settings §7):116 的碼加 6 的邊 = 128 */
#box_phones .ph-qr {
  flex: none;
  width: 128px;
  height: 128px;
  padding: 6px;
  border-radius: var(--radius-sm);
  background-color: var(--color-pureWhite);
}

#box_phones .ph-qr[hidden] {
  display: none;
}

#box_phones .ph-qr img {
  display: block;
  width: 116px;
  height: 116px;
  image-rendering: pixelated;
}

#box_phones .ph-panel .ph-code {
  margin-bottom: var(--space-4);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-black);
}

#box_phones .ph-how {
  text-wrap: pretty;
}

#box_phones .ph-panel .ph-until {
  margin-top: var(--space-4);
}

/* ---------- 清單 ---------- */
#box_phones .ph-wait {
  display: none;
  justify-content: center;
  padding: var(--space-32) 0;
  color: var(--color-black);
}

#box_phones #ph_body.is-wait .ph-wait {
  display: flex;
}

#box_phones #ph_body.is-wait .ph-pane {
  display: none;
}

#box_phones .ph-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

#box_phones .ph-row {
  padding: var(--space-16) 0;
  border-top: 1px solid var(--color-greyLight);
}

#box_phones .ph-row:first-child {
  border-top: 0;
  padding-top: 0;
}

#box_phones .ph-l1 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
}

#box_phones .ph-id {
  min-width: 0;
}

#box_phones .ph-name {
  margin: 0;
  font-size: 16px;
  color: var(--color-black);
  overflow-wrap: anywhere;
}

#box_phones .ph-sub {
  margin: var(--space-4) 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-greyMedium);
}

#box_phones .ph-acts {
  flex: none;
  display: flex;
  gap: var(--space-24);
  padding-top: 2px;
}

#box_phones .ph-chev {
  width: 12px;
  height: 12px;
  margin-left: var(--space-4);
  vertical-align: -1px;
}

#box_phones .ph-logbtn[aria-expanded="true"] .ph-chev {
  transform: rotate(180deg);
}

/* 最近操作:時間|操作|目標|IP;不用項目符號、不畫線 */
#box_phones .ph-log {
  margin-top: var(--space-12);
  font-size: 13px;
  line-height: 1.6;
}

#box_phones .ph-log[hidden] {
  display: none;
}

#box_phones .ph-grid {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  column-gap: var(--space-16);
  row-gap: var(--space-4);
}

#box_phones .ph-gip {
  display: contents;
}

#box_phones .ph-t,
#box_phones .ph-ip,
#box_phones .ph-g {
  color: var(--color-greyMedium);
}

#box_phones .ph-a {
  color: var(--color-greyDark);
}

#box_phones .ph-g {
  overflow-wrap: anywhere;
}

#box_phones .ph-logmsg {
  margin: 0;
  color: var(--color-greyMedium);
}

#box_phones .ph-more {
  margin-top: var(--space-8);
  font-size: 13px;
}

#box_phones .ph-err {
  margin: 0 0 var(--space-12);
  font-size: 14px;
  color: var(--color-redText);
}

#box_phones .ph-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 768px) {
  #box_phones {
    padding: var(--space-24);
  }

  #box_phones .ph-l1 {
    flex-direction: column;
    gap: var(--space-8);
  }

  #box_phones .ph-pair {
    flex-direction: column;
    align-items: flex-start;
  }

  /* 一筆兩行:「時間 操作」/「目標 · IP」 */
  #box_phones .ph-grid {
    grid-template-columns: auto 1fr;
    row-gap: 0;
  }

  #box_phones .ph-gip {
    display: block;
    grid-column: 2;
    margin-bottom: var(--space-8);
    font-size: 12px;
    color: var(--color-greyMedium);
  }

  #box_phones .ph-gip.no-g .ph-g,
  #box_phones .ph-gip.no-ip .ph-ip {
    display: none;
  }

  #box_phones .ph-gip.no-g.no-ip {
    display: none;
  }

  #box_phones .ph-gip:not(.no-g) .ph-ip::before {
    content: " · ";
  }
}