/* GLeX.AI — citizen chat prototype (/glexai-chat.html).
 *
 * Loaded on top of glex.css and crm.css (dialogs, toasts, form controls).
 * One messenger window: an app bar, then three panes that scroll on their
 * own — history of conversations · the conversation with its tabs (GLeX.AI,
 * legal clinics, councils) · open dialogs as a vertical accordion.
 *
 * Full-screen is the default (html.gc-full, set before first paint): the
 * site's own header, beta line and footer fold away and the window takes the
 * whole viewport, because a chat squeezed under a site header showed one
 * question at a time. "Згорнути" brings the site back around a smaller window.
 * Below 1280px the accordion folds away (the history lists the same
 * dialogs); below 960px the history becomes a drawer.
 */

.gc-shell{
  width:100%; max-width:1440px; margin:0 auto;
  padding:var(--s-3) max(var(--s-4), env(safe-area-inset-left)) 0;
}
.gc-shell [hidden],.gc-app [hidden]{display:none !important}

.gc-app{
  position:relative;
  display:grid; grid-template-columns:272px minmax(0,1fr) 304px; grid-template-rows:auto minmax(0,1fr);
  height:clamp(560px, calc(100svh - 150px), 980px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sheet);
  box-shadow:var(--shadow-card); overflow:hidden;
}

/* ── full-screen mode ──────────────────────────────────────────────────── */
.gc-full body{overflow:hidden}
.gc-full .topbar,.gc-full .masthead,.gc-full .beta-note,.gc-full .foot,.gc-full .skip{display:none}
.gc-full .gc-shell{max-width:none; padding:0}
.gc-full .gc-app{height:100vh; height:100dvh; border:0; border-radius:0; box-shadow:none}

/* ── app bar ───────────────────────────────────────────────────────────── */
.gc-bar{
  grid-column:1 / -1; display:flex; align-items:center; gap:var(--s-2);
  min-height:52px; padding:0 var(--s-3) 0 var(--s-4); border-bottom:1px solid var(--line); background:var(--surface);
}
.gc-bar__brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--title);
               font-size:17px; font-weight:800; letter-spacing:-.01em; flex:none}
.gc-bar__brand img{width:30px; height:30px; display:block}
:root[data-theme="dark"] .gc-bar__brand img{background:#F7FAFC; border-radius:7px; padding:2px}
.gc-bar__brand:focus-visible{outline:none; box-shadow:var(--focus); border-radius:var(--r-field)}
.gc-bar__beta{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--muted)}
.gc-bar__beta .dot{width:7px; height:7px; border-radius:50%; background:var(--warn); animation:blink 2.6s ease-in-out infinite}
.gc-bar__spacer{flex:1}
.gc-bar .ctl svg{width:19px; height:19px}
.gc-full .i-grow,:root:not(.gc-full) .i-shrink{display:none}

.gc-info{
  position:absolute; z-index:40; top:58px; right:var(--s-3); width:min(460px, calc(100% - 24px));
  display:grid; gap:var(--s-2); padding:var(--s-4) var(--s-5);
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--blue);
  border-radius:var(--r-card); box-shadow:var(--shadow-lift); font-size:14.5px; color:var(--muted);
}
:root[data-theme="dark"] .gc-info{box-shadow:0 12px 32px rgba(0,0,0,.45)}
.gc-info b{color:var(--title)}
.gc-info__close{justify-self:end}

/* ── shared bits ───────────────────────────────────────────────────────── */
.gc-ava{
  width:32px; height:32px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:var(--blue-tint); color:var(--blue-strong); font-size:12.5px; font-weight:700;
}
.gc-ava--council{border-radius:8px; background:var(--surface-alt); color:var(--ink); border:1px solid var(--line)}
.gc-ava--glex{background:none}
.gc-ava--glex img{width:100%; height:100%; object-fit:contain; display:block}
:root[data-theme="dark"] .gc-ava--glex img{background:#F7FAFC; border-radius:8px; padding:2px}
.gc-ava--lg{width:44px; height:44px; font-size:15px}
.gc-ava--3{font-size:10px; letter-spacing:-.02em}
.gc-ava--lg.gc-ava--3{font-size:13px}

.gc-unread{
  display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px;
  border-radius:var(--r-pill); background:var(--blue); color:#fff;
  font-family:var(--font); font-size:11.5px; font-weight:700; line-height:1; letter-spacing:0;
}
:root[data-theme="dark"] .gc-unread{color:#0B1219}

.gc-label{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.gc-pilot{display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:var(--r-pill);
          background:var(--blue-tint); color:var(--blue-strong); font-size:11.5px; font-weight:700; white-space:nowrap}

/* ── history (left) ────────────────────────────────────────────────────── */
.gc-history{display:flex; flex-direction:column; min-height:0; background:var(--canvas); border-right:1px solid var(--line)}
.gc-history__top{display:grid; gap:var(--s-2); padding:var(--s-3) var(--s-3) var(--s-2)}
.gc-history__list{flex:1; min-height:0; overflow-y:auto; padding:0 var(--s-2) var(--s-3)}
.gc-history__group{padding:var(--s-3) 10px 4px}
.gc-history__empty{padding:var(--s-2) 10px; font-size:13.5px; color:var(--faint)}
.gc-history__foot{padding:var(--s-3); border-top:1px solid var(--line); font-size:12.5px; line-height:1.5; color:var(--faint)}

.gc-item{
  display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:10px; align-items:center;
  width:100%; padding:8px 10px; margin:1px 0; border:0; border-radius:10px;
  background:none; color:inherit; font:inherit; text-align:left; cursor:pointer;
  transition:background var(--fast) var(--ease);
}
@media (hover:hover){ .gc-item:hover{background:var(--surface-alt)} }
.gc-item[aria-current="true"]{background:var(--blue-tint)}
.gc-item:focus-visible{outline:none; box-shadow:var(--focus)}
.gc-item__body{min-width:0}
.gc-item__t,.gc-item__s{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gc-item__t{font-size:14.5px; font-weight:600; color:var(--title)}
.gc-item__s{font-size:13px; color:var(--muted)}
.gc-item__r{display:grid; justify-items:end; gap:4px; font-family:var(--mono); font-size:11px; color:var(--faint)}

/* ── conversation (centre) ─────────────────────────────────────────────── */
.gc-main{display:flex; flex-direction:column; min-width:0; min-height:0}
.gc-tabs{flex:none; padding:0 var(--s-4); gap:var(--s-1)}
.gc-tabs .tab{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; font-size:15px}
.gc-menu{display:none}

.gc-view{flex:1; min-height:0; display:flex; flex-direction:column}
.gc-head{
  flex:none; display:flex; align-items:center; gap:var(--s-3);
  padding:8px var(--s-5); border-bottom:1px solid var(--line);
}
.gc-head .gc-ava--lg{width:36px; height:36px; font-size:13px}
.gc-head .gc-ava--lg.gc-ava--3{font-size:11px}
.gc-head__body{min-width:0; flex:1}
.gc-head h2{font-size:16px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gc-head p{font-size:13px; line-height:1.4; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gc-head .dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--faint); vertical-align:middle; margin:0 4px 1px 0}
.gc-head .dot--ok{background:var(--ok)} .gc-head .dot--warn{background:var(--warn)}
.gc-scroll{flex:1; min-height:0; overflow-y:auto; padding:var(--s-4) var(--s-5)}
.gc-thread{display:grid; gap:var(--s-3); align-content:start; max-width:880px; margin:0 auto}
.gc-thread .bubble{padding:10px 14px; font-size:15.5px}
.gc-thread .msg{gap:6px}
.gc-thread .msg__meta{margin-top:-2px}
.gc-composer{
  flex:none; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px var(--s-2); align-items:end;
  padding:10px var(--s-5) 8px; border-top:1px solid var(--line); background:var(--surface);
}
.gc-composer .textarea{min-height:46px; height:46px; max-height:180px; resize:none; padding:11px 14px}
.gc-composer .btn{height:46px}
.gc-composer__note{grid-column:1 / -1; font-size:12px; color:var(--faint);
                   white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.gc-empty{max-width:640px; margin:var(--s-5) auto 0; display:grid; gap:var(--s-3); text-align:center}
.gc-empty .chips-row{justify-content:center}

.gc-handover{display:flex; flex-wrap:wrap; align-items:center; gap:6px var(--s-2); font-size:13.5px; color:var(--muted)}
.gc-who{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--faint)}

/* A norm in a chat stays its own block with a link to the official text
   (design code §06), but in two lines instead of a card. */
.gc-norm{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 10px; align-items:baseline;
  max-width:760px; padding:8px 12px; background:var(--surface);
  border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:10px; font-size:14px;
}
.gc-norm__ref{font-family:var(--mono); font-weight:500; color:var(--blue); text-decoration:none; white-space:nowrap}
.gc-norm__body{color:var(--muted); line-height:1.45; min-width:0}
.gc-norm__body b{color:var(--title); font-weight:600}
.gc-norm__src{font-size:13.5px; font-weight:600; color:var(--blue); text-decoration:none; white-space:nowrap}
@media (hover:hover){ .gc-norm a:hover{text-decoration:underline} }

/* Clinic and council messages: the other side of the dialog. */
.bubble--them{justify-self:start; background:var(--surface-alt); color:var(--ink);
              border-radius:18px 18px 18px 6px; white-space:pre-wrap}

/* ── lists of clinics and councils ─────────────────────────────────────── */
.gc-banner{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-2) var(--s-4);
           margin-bottom:var(--s-4)}
.gc-section{display:grid; gap:var(--s-3); margin-bottom:var(--s-5)}
.gc-section__head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--s-2)}
.gc-section h3{font-size:16px}
.gc-filters{display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-3); align-items:center}
.gc-filters .input,.gc-filters .select{width:auto; flex:1 1 180px; min-width:0}
.gc-cards{display:grid; gap:var(--s-3); grid-template-columns:repeat(auto-fill, minmax(260px, 1fr))}
.gc-card{
  display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:var(--s-3); align-items:start;
  width:100%; padding:var(--s-4); background:var(--surface); color:inherit;
  border:1px solid var(--line); border-radius:var(--r-card); font:inherit; text-align:left; cursor:pointer;
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.gc-card--pilot{border-color:var(--blue)}
@media (hover:hover){ .gc-card:hover{border-color:var(--blue); box-shadow:var(--shadow-lift)} }
.gc-card:focus-visible{outline:none; box-shadow:var(--focus)}
.gc-card__body{display:grid; gap:2px; min-width:0}
.gc-card__t{font-weight:600; color:var(--title); line-height:1.3}
.gc-card__s{font-size:13.5px; color:var(--muted); line-height:1.4}
.gc-card .status-line{font-size:13px; margin-top:4px}
.gc-card__last{
  margin-top:6px; font-size:13.5px; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ── council appeal ────────────────────────────────────────────────────── */
.gc-appeal{
  flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px;
  padding:6px var(--s-5); border-bottom:1px solid var(--line); background:var(--surface-alt);
  font-size:13px; color:var(--muted);
}
.gc-appeal b{color:var(--title)}
.gc-appeal .badge{height:22px; font-size:12px}
.gc-appeal .norm-ref{font-size:13px}
.gc-form{display:grid; gap:var(--s-4); max-width:720px; margin:0 auto}
.gc-form__intro{font-size:15px; color:var(--muted)}
.gc-types{display:grid; gap:var(--s-2)}
.gc-type{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; padding:10px 14px;
         border:1px solid var(--line); border-radius:var(--r-field); cursor:pointer; font-size:14.5px}
.gc-type:has(input:checked){border-color:var(--blue); background:var(--blue-tint)}
.gc-type input{margin:3px 0 0; accent-color:var(--blue)}
.gc-type b{display:block; color:var(--title)}
.gc-type span span{color:var(--muted); font-size:13.5px}
.gc-form .form-grid{gap:var(--s-3)}
.gc-form__actions{display:flex; flex-wrap:wrap; gap:var(--s-2)}
.gc-error{color:var(--err); font-size:13.5px}

/* ── open dialogs (right): a vertical accordion ────────────────────────── */
.gc-dock{display:flex; flex-direction:column; min-height:0; border-left:1px solid var(--line)}
.gc-dock__head{flex:none; padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--line)}
.gc-dock__head h2{font-size:15px}
.gc-dock__head p{font-size:13px; color:var(--faint)}
.gc-dock__list{flex:1; min-height:0; overflow-y:auto}
.gc-acc{border-bottom:1px solid var(--line)}
.gc-acc__btn{
  display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:10px; align-items:center;
  width:100%; padding:10px var(--s-4); border:0; background:none; color:inherit; font:inherit;
  text-align:left; cursor:pointer;
}
@media (hover:hover){ .gc-acc__btn:hover{background:var(--surface-alt)} }
.gc-acc__btn:focus-visible{outline:none; box-shadow:inset var(--focus)}
.gc-acc__btn[aria-expanded="true"]{background:var(--surface-alt)}
.gc-acc__body{display:grid; gap:8px; padding:var(--s-2) var(--s-4) var(--s-4); background:var(--surface-alt)}
.gc-mini{font-size:13.5px; line-height:1.45; padding:8px 12px; max-width:92%; white-space:pre-wrap}
.gc-mini--me{justify-self:end; background:var(--blue); color:#fff; border-radius:14px 14px 4px 14px}
:root[data-theme="dark"] .gc-mini--me{color:#0B1219}
.gc-mini--them{justify-self:start; background:var(--surface); border:1px solid var(--line); border-radius:14px 14px 14px 4px}
.gc-quick{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; margin-top:4px}
.gc-quick .input{min-height:40px; font-size:14px}
.gc-acc__body .linkish{font-size:14px; justify-self:start}

.gc-backdrop{position:fixed; inset:0; z-index:79; background:var(--overlay)}

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width:1279px){
  .gc-app{grid-template-columns:256px minmax(0,1fr)}
  .gc-dock{display:none}
}
@media (max-width:959px){
  .gc-app{grid-template-columns:minmax(0,1fr)}
  .gc-history{
    position:fixed; z-index:80; top:0; bottom:0; left:0; width:min(320px, 88vw);
    transform:translateX(-102%); transition:transform var(--fast) var(--ease); box-shadow:var(--shadow-lift);
  }
  .gc-history.is-open{transform:none}
  .gc-menu{display:inline-grid}
  .gc-head,.gc-appeal,.gc-composer{padding-inline:var(--s-4)}
  .gc-scroll{padding:var(--s-3) var(--s-4)}
  .gc-bar{padding-inline:var(--s-2) var(--s-2); gap:2px}
  .gc-bar__brand span{display:none}
}
/* Without full-screen a phone keeps the page scrolling and pins the composer. */
@media (max-width:959px){
  :root:not(.gc-full) .gc-app{height:auto; overflow:visible}
  :root:not(.gc-full) .gc-view{min-height:65svh}
  :root:not(.gc-full) .gc-scroll{overflow:visible}
  :root:not(.gc-full) .gc-composer{position:sticky; bottom:0; z-index:5; border-radius:0 0 var(--r-sheet) var(--r-sheet)}
}
@media (max-width:560px){
  .gc-composer .btn{padding:0 16px}
  .gc-bar__beta{font-size:0; gap:0}
  /* "New conversation" lives in the history drawer on a phone; in the head it
     squeezed the title into a narrow column. */
  .gc-head [data-new]{display:none}
  .gc-norm{grid-template-columns:auto minmax(0,1fr)}
  .gc-norm__src{grid-column:2}
}