/* Migrated from confirmed AIPH_00082 Demo V1; regenerate with qa migration script. */
.comment-screen { --page: #eef1ee; --surface: #ffffff; --surface-soft: #f6f8f6; --ink: #1f2823; --muted: #66716a; --line: #dce3de; --brand: #2f5d4c; --brand-soft: #e6f0ea; --blue: #315f84; --blue-soft: #e9f1f7; --amber: #8b641f; --amber-soft: #fbf3df; --red: #9b4638; --red-soft: #f9ebe7; --shadow: 0 8px 22px rgba(31, 40, 35, .06); }
.comment-screen * { box-sizing: border-box; }
.comment-screen { margin: 0px; background: var(--page); color: var(--ink); font: 14px / 1.58 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
.comment-screen button, .comment-screen input, .comment-screen textarea, .comment-screen a { font: inherit; }
.comment-screen button, .comment-screen a { -webkit-tap-highlight-color: transparent; }
.comment-screen button { cursor: pointer; }
.comment-screen a { color: inherit; }
.comment-screen button:focus-visible, .comment-screen a:focus-visible, .comment-screen textarea:focus-visible, .comment-screen input:focus-visible { outline: rgb(140, 183, 164) solid 3px; outline-offset: 2px; }
.comment-screen [hidden] { display: none !important; }
.comment-screen .appbar { min-height: 58px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding: 9px 16px 12px; }
.comment-screen .appbar > div { min-width: 0px; flex: 1 1 0%; }
.comment-screen .appbar h3 { margin: 0px; font-size: 16px; line-height: 1.35; letter-spacing: 0px; }
.comment-screen .appbar small { display: block; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.comment-screen .back { width: 44px; height: 44px; display: inline-grid; flex: 0 0 44px; place-items: center; border: 0px; background: transparent; color: var(--ink); text-decoration: none; font-size: 25px; line-height: 1; }
.comment-screen .phone-body { min-height: 0px; flex: 1 1 0%; overflow-y: auto; padding: 18px; scrollbar-width: thin; }
.comment-screen .phone-actions { border-top: 1px solid var(--line); padding: 14px 18px 17px; background: var(--surface); }
.comment-screen .phone-actions .hint { margin: 7px 0px 0px; text-align: center; }
.comment-screen h3, .comment-screen h4, .comment-screen p { margin-top: 0px; }
.comment-screen .title { margin: 0px; font-size: 19px; line-height: 1.4; letter-spacing: 0px; }
.comment-screen .lead { margin: 6px 0px 0px; color: var(--muted); font-size: 12px; }
.comment-screen .section-label { margin: 20px 0px 8px; color: var(--muted); font-size: 11px; font-weight: 700; }
.comment-screen .hint { color: var(--muted); font-size: 11px; }
.comment-screen .error-text { min-height: 18px; margin: 7px 0px 0px; color: var(--red); font-size: 11px; }
.comment-screen .status-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.comment-screen .status-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: rgb(79, 133, 107); }
.comment-screen .status-dot.amber { background: rgb(180, 132, 41); }
.comment-screen .status-dot.red { background: rgb(181, 90, 72); }
.comment-screen .hero { display: flex; align-items: center; gap: 12px; }
.comment-screen .agent-mark { width: 48px; height: 48px; display: grid; flex: 0 0 48px; place-items: center; border-radius: 8px; background: var(--brand-soft); color: var(--brand); font-size: 21px; font-weight: 800; }
.comment-screen .hero .title { font-size: 20px; }
.comment-screen .tag { display: inline-flex; min-height: 24px; align-items: center; border-radius: 6px; background: var(--surface-soft); color: rgb(89, 101, 94); padding: 3px 7px; font-size: 10px; font-weight: 700; }
.comment-screen .tag.green { background: var(--brand-soft); color: var(--brand); }
.comment-screen .tag.blue { background: var(--blue-soft); color: var(--blue); }
.comment-screen .tag.amber { background: var(--amber-soft); color: var(--amber); }
.comment-screen .tag.red { background: var(--red-soft); color: var(--red); }
.comment-screen .tag + .tag { margin-left: 4px; }
.comment-screen .plain-group { border-top: 1px solid var(--line); }
.comment-screen .plain-row { min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 10px 0px; }
.comment-screen .plain-row > div:first-child { min-width: 0px; flex: 1 1 0%; }
.comment-screen .plain-row strong { display: block; font-size: 13px; }
.comment-screen .plain-row small { display: block; color: var(--muted); font-size: 10px; }
.comment-screen .plain-row .right { flex: 0 0 auto; text-align: right; }
.comment-screen .skill-block { border-bottom: 1px solid var(--line); padding: 10px 0px; }
.comment-screen .skill-block:last-child { border-bottom: 0px; }
.comment-screen .skill-block strong { display: block; margin-bottom: 3px; font-size: 12px; }
.comment-screen .skill-block p { margin: 0px; color: rgb(86, 98, 91); font-size: 11px; }
.comment-screen .channel-row { display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); padding: 13px 0px; }
.comment-screen .channel-row:last-child { border-bottom: 0px; }
.comment-screen .channel-mark { width: 34px; height: 34px; display: grid; flex: 0 0 34px; place-items: center; border-radius: 8px; background: rgb(237, 241, 239); font-weight: 800; }
.comment-screen .channel-main { min-width: 0px; flex: 1 1 0%; }
.comment-screen .channel-main strong { display: block; font-size: 13px; }
.comment-screen .channel-main small { display: block; color: var(--muted); font-size: 10px; }
.comment-screen .channel-row input { width: 20px; height: 20px; accent-color: var(--brand); }
.comment-screen .switch-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 0px; }
.comment-screen .switch-row strong { display: block; font-size: 13px; }
.comment-screen .switch-row small { display: block; max-width: 240px; color: var(--muted); font-size: 10px; }
.comment-screen .switch { width: 52px; height: 44px; position: relative; flex: 0 0 52px; border: 0px; border-radius: 8px; background: transparent; padding: 0px; }
.comment-screen .switch::before { content: ""; width: 48px; height: 28px; position: absolute; top: 8px; left: 2px; border-radius: 14px; background: rgb(185, 194, 188); }
.comment-screen .switch::after { content: ""; width: 22px; height: 22px; position: absolute; top: 11px; left: 5px; border-radius: 50%; background: white; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px; transition: transform 0.18s; }
.comment-screen .switch[aria-checked="true"]::before { background: var(--brand); }
.comment-screen .switch[aria-checked="true"]::after { transform: translateX(20px); }
.comment-screen .notice { border-left: 3px solid var(--blue); background: var(--blue-soft); padding: 11px 12px; }
.comment-screen .notice.amber { border-left-color: var(--amber); background: var(--amber-soft); }
.comment-screen .notice.red { border-left-color: var(--red); background: var(--red-soft); }
.comment-screen .notice.green { border-left-color: var(--brand); background: var(--brand-soft); }
.comment-screen .notice strong { display: block; font-size: 12px; }
.comment-screen .notice p { margin: 3px 0px 0px; color: rgb(83, 97, 90); font-size: 11px; }
.comment-screen .segmented { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 3px; margin: 14px 0px; border-radius: 8px; background: rgb(237, 241, 238); padding: 3px; }
.comment-screen .segmented button { min-height: 44px; border: 0px; border-radius: 6px; background: transparent; color: var(--muted); padding: 6px 3px; font-size: 11px; }
.comment-screen .segmented button.active { background: white; color: var(--ink); box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 3px; font-weight: 700; }
.comment-screen .record-list { border-top: 1px solid var(--line); }
.comment-screen .record { display: block; border-bottom: 1px solid var(--line); padding: 13px 2px; text-decoration: none; }
.comment-screen .record-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.comment-screen .record strong { min-width: 0px; overflow-wrap: anywhere; font-size: 12px; }
.comment-screen .record p { margin: 5px 0px 3px; color: rgb(78, 89, 83); font-size: 11px; }
.comment-screen .record small { color: var(--muted); font-size: 10px; }
.comment-screen .empty { padding: 36px 8px; text-align: center; }
.comment-screen .empty strong { display: block; font-size: 15px; }
.comment-screen .empty p { margin: 5px auto 0px; max-width: 230px; color: var(--muted); font-size: 11px; }
.comment-screen .context-head { display: flex; align-items: center; gap: 10px; }
.comment-screen .avatar { width: 34px; height: 34px; display: grid; flex: 0 0 34px; place-items: center; border-radius: 50%; background: rgb(236, 239, 235); color: rgb(78, 91, 83); font-weight: 800; }
.comment-screen .context-head strong { display: block; font-size: 12px; }
.comment-screen .context-head small { display: block; color: var(--muted); font-size: 10px; }
.comment-screen .post-quote { margin: 13px 0px 0px; border-left: 2px solid rgb(183, 193, 186); padding: 7px 0px 7px 11px; color: rgb(84, 96, 89); font-size: 11px; }
.comment-screen .bubble { max-width: 90%; margin-top: 10px; border-radius: 8px; background: rgb(240, 243, 241); padding: 10px 12px; font-size: 12px; }
.comment-screen .bubble.reply { margin-left: auto; background: var(--brand-soft); }
.comment-screen .bubble small { display: block; margin-bottom: 3px; color: var(--muted); font-size: 9px; }
.comment-screen .evidence { margin: 12px 0px 0px; padding-left: 13px; border-left: 1px solid rgb(207, 216, 209); }
.comment-screen .evidence li { position: relative; list-style: none; padding: 0px 0px 11px 6px; font-size: 11px; }
.comment-screen .evidence li::before { content: ""; width: 6px; height: 6px; position: absolute; top: 5px; left: -17px; border-radius: 50%; background: rgb(100, 132, 111); }
.comment-screen .evidence small { display: block; color: var(--muted); font-size: 9px; }
.comment-screen .reason-list { margin: 8px 0px 0px; padding: 0px; }
.comment-screen .reason-list li { position: relative; list-style: none; padding: 7px 0px 7px 18px; border-bottom: 1px solid var(--line); font-size: 11px; }
.comment-screen .reason-list li::before { content: "•"; position: absolute; left: 4px; color: var(--amber); }
.comment-screen .editor-label { display: flex; justify-content: space-between; gap: 10px; margin: 18px 0px 7px; font-size: 11px; font-weight: 700; }
.comment-screen textarea { width: 100%; min-height: 118px; resize: vertical; border: 1px solid rgb(174, 187, 178); border-radius: 8px; background: white; color: var(--ink); padding: 11px; line-height: 1.55; }
.comment-screen .data-list { border-top: 1px solid var(--line); }
.comment-screen .data-row { display: grid; grid-template-columns: 82px minmax(0px, 1fr); gap: 12px; border-bottom: 1px solid var(--line); padding: 10px 0px; }
.comment-screen .data-row dt { color: var(--muted); font-size: 10px; }
.comment-screen .data-row dd { margin: 0px; overflow-wrap: anywhere; text-align: right; font-size: 11px; font-weight: 600; }
.comment-screen .text-link { display: inline-flex; min-height: 44px; align-items: center; color: var(--brand); font-size: 12px; font-weight: 700; text-decoration: none; }
.comment-screen .text-link::after { content: "›"; margin-left: 5px; font-size: 18px; }
.comment-screen .btn { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgb(174, 187, 178); border-radius: 8px; background: white; color: var(--brand); padding: 9px 13px; text-align: center; text-decoration: none; font-size: 13px; font-weight: 700; }
.comment-screen .btn.primary { border-color: var(--brand); background: var(--brand); color: white; }
.comment-screen .btn.danger { border-color: rgb(201, 154, 141); color: var(--red); }
.comment-screen .btn:disabled { cursor: default; opacity: 0.52; }
.comment-screen .btn + .btn { margin-top: 8px; }
@media (max-width: 650px) {
.comment-screen .phone-body { padding: 16px; }
.comment-screen .phone-actions { padding: 13px 16px 15px; }
}
@media (max-width: 350px) {
.comment-screen .phone-body { padding: 14px; }
.comment-screen .appbar { padding-left: 10px; padding-right: 12px; }
.comment-screen .data-row { grid-template-columns: 68px minmax(0px, 1fr); gap: 8px; }
.comment-screen .segmented button { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.comment-screen .switch::after { transition: none; }
}
.comment-shell .screen { padding:0; margin:0; }
.comment-screen { display:flex; flex-direction:column; height:var(--app-viewport-height,100vh); height:100dvh; min-height:0; overflow:hidden; background:var(--surface); }
.comment-screen .phone-body { scroll-behavior:auto; }
.comment-screen .phone-actions { padding-bottom:calc(15px + env(safe-area-inset-bottom,0px)); }
.comment-screen .bubble, .comment-screen .post-quote, .comment-screen .skill-block p { overflow-wrap:anywhere; white-space:pre-wrap; }
.comment-screen .error-text:empty { display:none; }
.comment-screen button:disabled { cursor:default; opacity:.52; }
.comment-screen .channel-row:has(input:disabled) { opacity:.65; }
.comment-screen .review-alternatives { display:flex; flex-wrap:wrap; gap:20px; }
.comment-screen .review-alternatives .text-link { border:0; background:none; padding:0; min-height:44px; }
.comment-screen .mt-14 { margin-top:14px; }
.comment-screen .mt-16 { margin-top:16px; }
.comment-screen .mt-17 { margin-top:17px; }
.comment-screen .mt-18 { margin-top:18px; }