/* Daily Life Doc, round 13 (zone F3): the Ask AI panel (js/ask/ask-panel.js), drawn as the page "Expert Plans" draws
   .wask: the head "Ask AI" in the care colour with the switch This client · Knowledge base (.scope), the conversation
   (.amsgs: .am.me pink on the right, .am.ai white on the left; .work the quiet step; .srcl the sources; .acts the
   buttons), and the field (.afield, pink, with the round Send). On a client page it stands in the plan's place; at
   880 px and narrower it covers the page (the client page's .cpb[data-side="ask"], the Knowledge base's .kbp.askon). */

.wask { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; }
.wask .ah { flex: none; display: flex; align-items: center; gap: 6px; padding: 12px 10px 8px 14px; }
.wask .ah b { display: flex; flex-direction: column; min-width: 0; font-size: var(--t-s); margin-right: auto; color: var(--care-d); }
/* The client's name under "Ask AI": only at phone width, where the panel covers the client's page. */
.wask .acl { display: none; font-size: var(--t-xs); font-weight: 500; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 880px) { .wask .acl:not(:empty) { display: block; } }
.scope { display: inline-flex; background: var(--soft); border-radius: 999px; padding: 3px; }
.scope { flex: none; }
.scope button { font-size: var(--t-xs); font-weight: 500; color: var(--ink2); padding: 4px 9px; white-space: nowrap; border-radius: 999px; transition: background-color .3s, color .3s, box-shadow .3s; }
.scope button.on { background: var(--seg-on); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.scope button[disabled] { color: var(--ink3); opacity: .55; cursor: default; }
.askx { width: 28px; height: 28px; flex: none; background: var(--soft); }
.askx svg { width: 14px; height: 14px; }
.kbask .askx { display: none; }
.amsgs { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; overflow-y: auto; scrollbar-width: thin; }
.amsgs > :first-child { margin-top: auto; }
.aent { display: flex; flex-direction: column; gap: 8px; flex: none; }
.aent.in { animation: dd-rise .3s var(--ease-out) both; }
.am { display: flex; flex-direction: column; gap: 5px; flex: none; }
.am.me { align-items: flex-end; }
.am.ai { align-items: flex-start; }
.ab { max-width: 92%; padding: 7px 11px; border-radius: 16px; font-size: var(--t-sm); line-height: 1.42; overflow-wrap: anywhere; }
.am.me .ab { background: var(--care); color: var(--ink); border-bottom-right-radius: 6px; white-space: pre-wrap; }
.am.ai .ab { background: var(--surface); border: 1px solid var(--cardline); border-bottom-left-radius: 6px; }
/* The AI's answer with its few marks (js/ask/ask-text.js): paragraphs and lists with a small gap, no outer margin. */
.ab .amd, .ab ul.amd, .ab ol.amd { margin: 0; }
.ab .amd + .amd { margin-top: 6px; }
.ab ul.amd, .ab ol.amd { padding-left: 18px; }
.ab ul.amd li + li, .ab ol.amd li + li { margin-top: 2px; }
.ab .see { font: inherit; font-weight: 500; color: var(--care-d); text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.am .work { font-size: var(--t-xs); color: var(--ink3); animation: dd-live 1.2s ease-in-out infinite; }
.am .work.done { animation: none; }
.am .used { font-size: var(--t-xs); color: var(--ink2); }
.cnot { color: var(--try-d); }
.srcl { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.srcl span { display: flex; gap: 6px; align-items: baseline; font-size: var(--t-xs); color: var(--ink2); line-height: 1.35; animation: dd-rise .35s var(--ease-out) both; }
.srcl span::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--note-d); opacity: .6; transform: translateY(-1px); }
.afield { flex: none; display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px 10px; }
.afield .xin { flex: 1; min-width: 0; min-height: 40px; max-height: 160px; border: 0; border-radius: 20px; padding: 10px 14px; background: var(--care); color: var(--ink);
  font: inherit; font-size: var(--t-sm); line-height: 1.4; resize: none; overflow-y: auto; }
.afield .xin::placeholder { color: var(--care-d); opacity: .75; }
.afield .xin:focus { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--care-d) 30%, transparent); }

/* The client page: Ask AI in the plan's place; at phone width over the whole page. */
.cpb[data-side="ask"] .cpin { height: 100%; }
@media (max-width: 880px) {
  .cpb[data-side="ask"] .cpside { display: block; position: fixed; inset: 0; z-index: 40; border-radius: 0; animation: dd-rise .3s var(--ease-out) both; }
  .kbp.askon .kbask .askx { display: grid; }
  .wask .ah { padding-top: max(12px, env(safe-area-inset-top)); }
  .afield { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .afield .xin { font-size: var(--t-m); }
}