.tyotila{--navy:var(--secondary, var(--primary));--navy-2:var(--secondary-hover, var(--primary-hover));--sky:var(--info);--bg:var(--tt-pohja, var(--pinta-upotettu));--panel:var(--tt-paneeli, var(--pinta-korostettu));--line:var(--tt-viiva, var(--reuna-vahva));--text:var(--tt-teksti, var(--teksti));--text-2:var(--tt-harmaa, var(--teksti-toissijainen));--white:var(--secondary-ink, var(--teksti-pinnalla));--surface:var(--tt-kortti, var(--pinta));--focus:var(--tt-linkki);font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--text);background:var(--bg);font-size:16px;line-height:1.35}
/* HallaLinkin style.css asettaa bodylle Interin ja 14 px: Työtila perii oman fonttinsa ja 16 px leipätekstin. */
.tyotila body{font-family:inherit;font-size:inherit;line-height:inherit;color:var(--text);background:var(--bg)}
/* Natiivisäätimet sekä yhteisten otsikoiden ja kalenterin käyttämät tokenit
   seuraavat Työtilan omaa palettia, eivät HallaLinkin tummaa teemaa. */
.tyotila[data-theme-mode="dark"]{color-scheme:dark;--teksti:var(--tt-teksti);--tausta:var(--tt-pohja)}
*{box-sizing:border-box}body{margin:0}a{color:var(--tt-linkki)}button,input,select{font:inherit;min-height:44px;border-radius:7px}button{background:var(--navy);color:var(--white);border:1px solid var(--navy);padding:10px 16px;cursor:pointer}input,select{border:1px solid var(--line);padding:10px;background:var(--surface);color:var(--text);max-width:100%}button.secondary{background:var(--panel);color:var(--text);border-color:var(--line)}a,summary{min-height:44px}summary{cursor:pointer;padding:12px 0}label{display:block;font-weight:600;margin:14px 0 6px}form>input:not([type=hidden]),form>select{display:block;width:100%;margin-bottom:12px}form>button{margin:8px 0}h1{font-size:24px;margin:8px 0}h2{font-size:19px}h3{font-size:14px}p{line-height:1.7}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.topbar{height:68px;background:var(--navy);color:var(--white);display:flex;align-items:center;gap:20px;padding:10px 22px}.topbar img{width:116px;max-height:42px}.brand{display:flex;align-items:center;gap:12px;color:var(--white);text-decoration:none}.search{margin:0 auto;width:min(460px,45%)}.search input{width:100%}.account{position:relative}.account summary{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.menu{position:absolute;right:0;top:48px;width:280px;background:var(--surface);color:var(--text);border:1px solid var(--line);padding:16px;z-index:3;border-radius:10px}.menu a{display:block;padding:10px}.shell{display:grid;grid-template-columns:88px 260px minmax(0,1fr);min-height:calc(100dvh - 68px)}.rail{background:var(--navy-2);padding:12px 4px}.rail a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:76px;color:var(--white);text-decoration:none;font-size:11px;border-radius:8px}.rail a[aria-current]{background:var(--navy);color:var(--white)}.rail svg{width:23px;height:23px;fill:currentColor}.sidebar{background:var(--panel);padding:22px 16px;border-right:1px solid var(--line)}.sidebar h2{margin-top:0}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:700;color:var(--text-2)}.channel{display:flex;align-items:center;padding:10px 12px;text-decoration:none;color:var(--text);border-radius:7px}.channel[aria-current]{background:var(--surface);font-weight:700}.person{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:12px}.person small{display:block;color:var(--text-2);margin-top:5px}.avatar{width:34px;height:34px;flex-shrink:0;background:var(--navy);color:var(--white);display:inline-flex;align-items:center;justify-content:center;border-radius:10px;font-weight:700}.viewhead{padding:22px 32px;border-bottom:1px solid var(--line);background:var(--surface)}.content{padding:24px 32px;max-width:1200px}.muted,time{color:var(--text-2);font-size:12px}.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px;margin-bottom:20px}.panel form{max-width:560px}.panel>a,.login-card>a{display:inline-flex;align-items:center;margin-top:12px}.message{display:flex;gap:14px;margin:28px 0;overflow-wrap:anywhere}.message time{display:inline-block;margin-left:12px}.message p{margin:8px 0}.notice{padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:12px}.member-row{padding:16px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}.member-row form{display:flex;gap:8px;flex-wrap:wrap;max-width:none;align-items:center}.member-row select{width:auto;margin:0}.badge{padding:3px 7px;border-radius:5px;background:var(--panel);color:var(--text);margin-left:8px}.login-card{max-width:460px;margin:9vh auto;padding:30px;background:var(--surface);border:1px solid var(--line);border-radius:14px}.skip,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip:focus{width:auto;height:auto;clip-path:none;background:var(--surface);padding:12px;z-index:9}[hidden]{display:none!important}
@media(max-width:700px){.topbar{height:auto;min-height:112px;padding:10px 14px;gap:10px;flex-wrap:wrap}.brand strong{font-size:12px}.topbar img{width:90px}.account{margin-left:auto}.account summary{max-width:154px;font-size:12px}.search{order:3;width:100%}.shell{display:flex;flex-direction:column;padding-bottom:76px;min-height:calc(100dvh - 112px)}.rail{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:4px 0;z-index:5}.rail a{min-height:64px;font-size:10px}.sidebar{border-right:0;border-bottom:1px solid var(--line);padding:16px}.sidebar .person,.sidebar h3,.sidebar>.muted{display:none}.sidebar details{display:inline-block;vertical-align:top;width:32%;font-size:11px}.sidebar summary{overflow-wrap:anywhere}.channel{padding:10px 4px;overflow-wrap:anywhere}.viewhead,.content{padding:20px 16px}.panel{padding:18px}.login-card{margin:24px 16px}.message time{display:block;margin:6px 0}.member-row form{align-items:stretch}.menu{right:0;width:270px}h1{font-size:22px}}
textarea{font:inherit;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:12px;width:100%;resize:vertical;min-height:88px}textarea:focus-visible{outline:3px solid var(--focus)}.chat-shell{height:calc(100dvh - 68px);min-height:0}.chat-shell>.sidebar{overflow:auto}.chat-shell>main{display:flex;flex-direction:column;min-width:0;min-height:0}.chat-shell .viewhead{padding:14px 24px}.conversation-layout{display:flex;min-height:0;flex:1}.conversation{display:flex;flex-direction:column;min-width:0;flex:1}.conversation>#messages{overflow:auto;flex:1;padding:0 24px}.message>div{min-width:0;flex:1}.message .body{line-height:1.7;overflow-wrap:anywhere}.message .toolbar{flex-wrap:wrap}.toolbar{display:flex;gap:6px;flex-wrap:wrap}.toolbar button{font-size:12px;padding:7px 10px}.composer{padding:12px 24px;border-top:1px solid var(--line);background:var(--surface)}.composer label{margin:4px 0;font-size:12px}.composer input[type=file]{font-size:11px;max-width:100%;margin:0}.composer small{display:block;color:var(--text-2)}.thread{width:40%;min-width:300px;border-left:1px solid var(--line);overflow:auto;padding:16px;background:var(--surface)}.thread .composer{padding:10px 0}.thread .message{margin:16px 0}.channel-button{display:block;width:100%;text-align:left;background:var(--panel);color:var(--text);border:0}.channel-button.active{background:var(--surface)}.channel-button.unread{font-weight:800}.channel-button .badge{float:right}.attachment{display:block;padding:8px;overflow-wrap:anywhere}.reaction[aria-pressed=true]{border:2px solid var(--primary)}#chat-status{margin:0;padding:0 20px;color:var(--text-2)}#back-list{display:none}dialog{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:12px;width:min(540px,92vw);max-height:85dvh;overflow:auto}dialog::backdrop{background:var(--navy-2);opacity:.65}dialog fieldset{border:1px solid var(--line);max-height:40vh;overflow:auto}dialog fieldset label{display:flex;align-items:center;gap:12px;margin:0;min-height:44px}dialog fieldset input{width:22px}dialog button{margin:5px}.mention-picker{border:1px solid var(--line);max-height:150px;overflow:auto}.mention-picker button{display:block;width:100%;text-align:left;background:var(--panel);color:var(--text)}.result{display:block;width:100%;text-align:left;margin:8px 0;background:var(--panel);color:var(--text)}.message code{background:var(--panel);padding:2px 4px}#queue-status{font-size:12px}.chat-shell .sidebar details{display:block;width:auto}.chat-shell .sidebar h3{display:block}
@media(max-width:1000px){.thread{width:45%;min-width:260px}.composer{padding:10px 14px}.conversation>#messages{padding:0 14px}.topbar{gap:10px}.account summary{max-width:150px}}
@media(max-width:700px){.chat-shell{height:calc(100dvh - 122px);min-height:0;padding-bottom:76px}.chat-shell>.sidebar{flex:1;border:0}.chat-shell>main{display:none;flex:1;overflow:hidden}.chat-shell .viewhead{padding:8px 14px}.chat-shell .viewhead h1{font-size:18px}.chat-shell .sidebar details{font-size:14px}.chat-shell .sidebar summary{font-size:14px}#chat-app[data-view=conversation] .chat-shell>.sidebar,#chat-app[data-view=thread] .chat-shell>.sidebar{display:none}#chat-app[data-view=conversation] .chat-shell>main,#chat-app[data-view=thread] .chat-shell>main{display:flex}#back-list{display:inline-block}#chat-app[data-view=thread] .conversation{display:none}.thread{width:100%;min-width:0}.composer small{display:none}.composer textarea{min-height:65px}.composer label[for=message-files]{font-size:10px}.topbar .brand strong{display:none}.topbar .account summary{max-width:120px}.topbar{min-height:122px}.chat-shell .rail{height:76px}.chat-shell .sidebar .toolbar button{flex:1}}
.message-actions{position:relative;margin-left:auto}.message-actions>summary{list-style:none;cursor:pointer;min-width:44px;min-height:44px;text-align:center;padding:10px;color:var(--text-2)}.message-actions .toolbar{padding:6px;border:1px solid var(--line);background:var(--surface);border-radius:8px}.message-actions .toolbar button{width:44px;height:44px;font-size:20px;padding:4px}.message-actions .toolbar a{display:flex;align-items:center;min-height:44px;padding:6px}.message-actions select{width:auto;min-height:44px;margin:0}.message-actions:not([open]){opacity:0}.message:hover .message-actions,.message:focus-within .message-actions{opacity:1}@media(hover:none){.message-actions:not([open]){opacity:1}}
.message-actions .toolbar button:last-of-type{width:auto;font-size:12px;padding:7px 10px}

.bot-settings{margin:0 auto;overflow-wrap:anywhere}.bot-settings fieldset{border:1px solid var(--line);border-radius:8px;margin:16px 0;padding:12px;min-width:0}.bot-settings fieldset label{display:flex;align-items:center;gap:12px;min-height:44px;margin:0}.bot-settings input[type=checkbox]{width:22px;flex-shrink:0}.bot-settings label>input:not([type=checkbox]),.bot-settings label>select{display:block;width:100%;margin-top:6px}.bot-settings #new-bot-key{width:100%;font-family:monospace}.bot-settings>a{display:inline-flex;align-items:center;min-height:44px}

.settings-shell{grid-template-columns:88px minmax(0,1fr)}
.bot-settings{width:100%;min-width:0}
.settings-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.settings-tabs a{display:flex;align-items:center;padding:10px 14px;border:1px solid var(--line);border-radius:8px;text-decoration:none;background:var(--surface)}
.settings-tabs a[aria-selected=true]{background:var(--navy);color:var(--white)}
.settings-section{scroll-margin-top:16px}
.bot-settings .compact-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:none}
.compact-form>label{margin:0;min-width:0}
.compact-form>fieldset,.compact-form>p,.compact-form>h3{grid-column:1/-1;margin:0}
.bot-settings fieldset{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:4px 12px}
.bot-settings fieldset label{font-size:12px;overflow-wrap:anywhere}
.bot-settings .compact-form>button{justify-self:start}
.composer-hint{display:block;color:var(--text-2);font-size:11px;margin:6px 0}
@media(max-width:700px){
 .topbar{height:auto;min-height:122px;padding:10px 12px;gap:8px;flex-wrap:wrap}
 .topbar .brand{gap:6px;flex-shrink:0}
 .topbar img{width:76px}
 .topbar .brand strong{display:block;font-size:12px;white-space:nowrap}
 .topbar .account{margin-left:auto;min-width:0}
 .topbar .account summary{max-width:90px;font-size:11px}
 .topbar #notifications-toggle{padding:8px;flex-shrink:0}
 .topbar .search{order:3;width:100%;margin:0}
 .composer .composer-hint{display:block}
 .settings-shell{display:flex;flex-direction:column;padding-bottom:76px}
 .settings-shell .rail{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));z-index:5;padding:4px 0}
 .settings-shell .rail a{min-height:64px;font-size:10px}
 .bot-settings .compact-form{grid-template-columns:minmax(0,1fr)}
}

/* Mobile realtime status stays separate from message content. */
.read-receipt{display:block;color:var(--text-2);font-size:.75rem;margin-top:.3rem}
#typing-status{min-height:1.4em;margin:.2rem 1rem}
.update-banner{position:fixed;bottom:1rem;left:1rem;right:1rem;z-index:1000;display:flex;align-items:center;justify-content:center;gap:.5rem}

/* M6: inline proposals stay within the message at phone and desktop widths. */
.action-proposal { border:1px solid var(--line); border-radius:10px; padding:12px; margin:12px 0; min-width:0; overflow-wrap:anywhere; }
.action-proposal p { white-space:pre-wrap; margin:8px 0; }
.action-proposal > small { display:block; margin:8px 0; }
.action-proposal summary { cursor:pointer; font-weight:600; padding:10px 0; }
.proposal-form { display:grid; gap:10px; min-width:0; }
.proposal-form label { display:grid; gap:4px; min-width:0; }
.proposal-form input,.proposal-form textarea,.proposal-form select { width:100%; min-width:0; max-width:100%; box-sizing:border-box; font:inherit; }
.proposal-form button,.action-proposal > button { min-height:44px; margin-top:8px; }
@media (max-width:700px) { .action-proposal { padding:10px; } .action-proposal button { width:100%; } }
/* HallaLink style.css positions .sidebar as a fixed off-canvas drawer; Työtila lays it out in its own grid. */
.tyotila .sidebar{position:static;top:auto;left:auto;bottom:auto;width:auto;height:auto;transition:none;z-index:auto;box-shadow:none}

/* Private profile images share the existing semantic theme. */
.tyotila .avatar { border-radius: 50%; overflow: hidden; vertical-align: middle; }
.tyotila .avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tyotila .avatar[data-colour=sky] { background: var(--sky); color: var(--white); }
.tyotila .avatar[data-colour=green] { background: var(--success); color: var(--white); }
.tyotila .avatar[data-colour=amber] { background: var(--warning); color: var(--text); }
.tyotila .avatar[data-colour=red] { background: var(--danger); color: var(--white); }
.tyotila .avatar[data-colour=blue], .tyotila .avatar[data-colour=purple] { background: var(--primary); color: var(--primary-ink); }
.tyotila .avatar-person { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; overflow-wrap: anywhere; }
.tyotila .card-assignees { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .8rem; }
.tyotila .channel-button .avatar, .tyotila #conversation-title .avatar { margin-right: .5rem; }
.tyotila .avatar-editor { display: grid; gap: .5rem; width: 100%; min-width: 0; margin: 1rem 0; }
.tyotila .member-row .avatar-editor { display: grid; }
.tyotila .avatar-editor label { margin: 0; overflow-wrap: anywhere; }
.tyotila .avatar-editor input { display: block; width: 100%; min-width: 0; }
.tyotila .avatar-editor p { margin: 0; }
.tyotila .avatar-preview .avatar, .tyotila .avatar-local-preview { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
@media (max-width: 420px) {
  .tyotila .avatar-editor .toolbar button { flex: 1 1 100%; }
  .tyotila .avatar-editor { max-width: 100%; }
}
/* Paluu HallaLinkiin (Petteri 29.10.2026) */
.hallalink-paluu{color:var(--white);text-decoration:none;font-size:13px;display:inline-flex;align-items:center;min-height:44px;padding:0 6px;white-space:nowrap}.hallalink-paluu:hover{text-decoration:underline}
/* Kanavan toiminnot kokoon taitettuna ja mobiilin kirjoituskenttä tiiviiksi (Petteri 29.10.2026:
   "mobiilinäkymä aivan tukossa", viestit jäivät napiston ja kirjoituskentän väliin) */
.kanavan-toiminnot{margin-top:4px}.kanavan-toiminnot>summary{min-height:44px;padding:10px 0;font-size:13px;color:var(--text-2)}
.kanavan-toiminnot:has(#channel-actions:empty){display:none}
@media(max-width:700px){
 .hallalink-paluu{display:none}  /* puhelimessa käyttäjävalikossa, yläpalkki pysyy yhdellä rivillä */
 #chat-app .viewhead h1{margin:2px 0}
 /* Yksi rivi kuten WhatsAppissa: [Liite] [kenttä] [Lähetä]. 16 px estää iPhonen zoomauksen. */
 #chat-app input,#chat-app textarea,#chat-app select{font-size:16px}
 #chat-app .composer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px;align-items:end;padding:6px 8px}
 #chat-app .composer>textarea{grid-column:2;grid-row:1;min-height:44px;max-height:30vh;height:44px;margin:0;resize:none;padding:10px}
 #chat-app .composer>label,#chat-app .composer small,#chat-app .composer>input[type=file]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 #chat-app .composer>button[type=submit]{grid-column:3;grid-row:1;margin:0;min-height:44px}
 #chat-app .composer>.mention-picker{grid-column:1/-1;grid-row:2}
}
/* Avattu keskustelu puhelimessa kuten WhatsAppissa (Petteri 29.10.2026): yläpalkki ja
   alavalikko piiloon, otsikkorivi tiiviiksi, viestit täyttävät ruudun, kenttä alareunassa. */
@media(max-width:700px){
 body:has(#chat-app[data-view=conversation]) .topbar,body:has(#chat-app[data-view=thread]) .topbar{display:none}
 #chat-app[data-view=conversation] .rail,#chat-app[data-view=thread] .rail{display:none}
 #chat-app[data-view=conversation] .chat-shell,#chat-app[data-view=thread] .chat-shell{height:100dvh;padding-bottom:0}
 #chat-app[data-view=conversation] .chat-shell>main{display:flex;flex-direction:column;height:100dvh;min-height:0}
 #chat-app[data-view=conversation] .viewhead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px 10px;position:relative;border-bottom:1px solid var(--line)}
 #chat-app[data-view=conversation] #back-list{min-width:44px;padding:8px 12px;font-size:18px;margin:0}
 #chat-app[data-view=conversation] .viewhead h1{margin:0;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #chat-app[data-view=conversation] .kanavan-toiminnot{margin:0}
 #chat-app[data-view=conversation] .kanavan-toiminnot>summary{padding:10px 4px;font-size:13px}
 #chat-app[data-view=conversation] .kanavan-toiminnot[open] #channel-actions{position:absolute;right:8px;top:100%;z-index:6;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:220px}
 #chat-app[data-view=conversation] #chat-status:empty{display:none}
 #chat-app[data-view=conversation] .conversation-layout{flex:1;min-height:0}
 #chat-app[data-view=conversation] .conversation{min-height:0}
 #chat-app[data-view=conversation] #messages{flex:1;min-height:0;overflow-y:auto}
}
.ilmoituskehote{margin:10px 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}.ilmoituskehote p{margin:0;flex:1 1 100%;font-size:13px;line-height:1.5}.ilmoituskehote a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}.ilmoituskehote button{min-height:44px}
/* Pitkän ryhmäkeskustelun nimen lukemattomat pysyvät samalla rivillä */
#channel-list .channel-button{display:flex;align-items:center;gap:8px;text-align:left}#channel-list .channel-button>.badge{flex:0 0 auto;margin-left:auto}
/* Kirjoitusrivi kaikilla leveyksillä yhdeksi riviksi kuten WhatsApp Webissä (29.10.2026):
   pöytäkoneella kenttä vei puolet ruudusta ja viestit jäivät pieneen laatikkoon. */
#chat-app .composer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:end;padding:10px 16px}
#chat-app .composer>textarea{grid-column:2;grid-row:1;min-height:44px;max-height:30vh;height:44px;margin:0;resize:none;padding:10px}
#chat-app .composer>label,#chat-app .composer small,#chat-app .composer>input[type=file]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#chat-app .composer>button[type=submit]{grid-column:3;grid-row:1;margin:0;min-height:44px}
#chat-app .composer>.mention-picker{grid-column:1/-1;grid-row:2}
/* Kanavan nimi käyttää vapaan tilan ja rivittyy kokonaan myös kapeassa listassa. */
#channel-list .kanavan-nimi{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere}
/* Viestikuplat kuten WhatsAppissa (Ville ja Tommi 29.10.2026): omat oikealle. */
#messages .message,#thread-messages .message{margin:10px 0;gap:10px;align-items:flex-start}
.message>.kupla{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 12px;max-width:min(80%,640px);min-width:0}
.message>.kupla>time{margin-left:8px}
.message.oma{flex-direction:row-reverse}
.message.oma>.avatar,.message.oma>.kupla>strong{display:none}
.message.oma>.kupla{background:color-mix(in srgb,var(--primary) 14%,var(--surface));border-color:color-mix(in srgb,var(--primary) 30%,var(--line))}
.message.oma>.kupla>time{margin-left:0}
.message .kupla .body p{margin:4px 0}
/* Kuplan hienosäätö: ··· oikeaan yläkulmaan (ei tyhjää riviä), aika nimen viereen,
   päivitysilmoitus ylös niin ettei se peitä kirjoituskenttää. */
.message>.kupla{position:relative;padding-right:44px}
.message>.kupla .message-actions{position:absolute;top:0;right:0;margin:0}
.message>.kupla .message-actions>summary{min-width:44px;min-height:40px;padding:8px}
.message>.kupla .message-actions[open] .toolbar{position:absolute;right:0;top:40px;z-index:5;min-width:220px;display:flex;flex-wrap:wrap;gap:4px}
.message .kupla>time,#chat-app .message .kupla>time{display:inline;margin:0 0 0 8px;font-size:12px}
.message.oma .kupla>time{margin:0}
.update-banner{top:.75rem;bottom:auto}
/* Ilmoitusasetukset selkeiksi (Petteri 29.10.2026) */
#push-settings fieldset,#notification-settings fieldset{border:0;padding:0;margin:16px 0 0}
#push-settings legend,#notification-settings legend{font-weight:700;padding:0;margin-bottom:6px}
#push-settings fieldset label,#notification-settings fieldset label{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:400;margin:0}
.laitteen-tila{margin:0 0 6px}#push-tila{font-weight:700}

/* HallaBit-ulkoasuohje (Ville 28.10.2026, v1): vain värit, typografia, välit ja komponenttien tyyli.
   Asettelu ja toiminta pysyvät Petterin versiossa. Arvot ohjeesta, värit Työtilan muuttujista. */
.tyotila{--sade-dialogi:24px;--sade-kortti:24px;--sade-nappi:20px;--sade-pieni:20px;--sade-kentta:20px;--liike:cubic-bezier(.23,1,.32,1);--varjo-kortti:0 1px 2px color-mix(in srgb,var(--navy) 4%,transparent);--varjo-nosto:0 6px 20px color-mix(in srgb,var(--navy) 12%,transparent);--varjo-valikko:0 10px 28px color-mix(in srgb,var(--navy) 16%,transparent),0 0 0 1px color-mix(in srgb,var(--navy) 8%,transparent);--toissa:var(--tt-toissa, color-mix(in srgb,var(--navy) 7%,var(--surface)))}
.tyotila .topbar{background:linear-gradient(170deg,var(--navy),var(--navy-2))}
.tyotila :is(h1,h2,h3){letter-spacing:-.02em;text-wrap:balance}
.tyotila .viewhead h1,.tyotila main.content>h1,.tyotila .shell:not(.chat-shell)>main h1{font-weight:800}
.tyotila :is(.panel,dialog,.thread) h2{font-weight:700}
.tyotila :is(button,input,select,textarea,summary,a):focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* Kortit ja valikot: 20 px pyöristys, pehmeä navy-varjo. */
.tyotila .panel,#kanban-app .kanban-card{border-radius:var(--sade-kortti);box-shadow:var(--varjo-kortti)}
.tyotila dialog[open]{border-radius:var(--sade-kortti);box-shadow:var(--varjo-valikko)}
.message>.kupla .message-actions[open] .toolbar,#chat-app .kanavan-toiminnot[open] #channel-actions,.tyotila .menu{border-radius:var(--sade-kortti);box-shadow:var(--varjo-valikko)}
/* Painikkeet: 48 px kapseli, paino 700, 16 px; toissijainen vaalealla pinnalla navy-tekstillä. */
/* Kanban-kortin otsikko ja siirtokahva pitävät Petterin koon: pill-tyyli kavensi otsikon sanoja katkoviksi. */
.tyotila :is(.shell:not(.chat-shell)>main,main.content,main.login-card) button:not(.icon-button):not(.result):not(.kanban-card button){min-height:48px;padding:0 20px;border-radius:var(--sade-nappi);font-size:16px;font-weight:700}
.tyotila :is(.shell:not(.chat-shell)>main,main.content) button.secondary:not(.icon-button):not(.result),#chat-app .sidebar>.toolbar button.secondary{background:var(--toissa);color:var(--text);border-color:transparent}
#chat-app .sidebar>.toolbar button,#kanban-app .viewhead .toolbar button,#chat-app .viewhead .toolbar button,.tyotila .member-row button,.ilmoituskehote button{border-radius:var(--sade-pieni);font-weight:700}
#kanban-app .viewhead .toolbar button.secondary,.tyotila .member-row button.secondary{background:var(--toissa);color:var(--text);border-color:transparent}
.tyotila dialog button.result{display:block;width:100%;min-height:48px;height:auto;padding:12px 14px;border:0;border-radius:var(--sade-kentta);background:var(--toissa);color:var(--text);font-weight:600;text-align:left;white-space:normal;overflow-wrap:anywhere}
.tyotila button{transition:transform 160ms var(--liike),background-color 160ms var(--liike)}
.tyotila button:active{transform:scale(.97)}
/* Kirjoitusrivi: Petterin asettelu, ohjeen pyöristykset. */
#chat-app .composer>textarea{border-radius:var(--sade-kentta)}
#chat-app .composer>button[type=submit],#chat-app .composer>button:last-of-type{border-radius:var(--sade-pieni);font-weight:700}
/* Kentät: 48 px, pyöristys 14 px, otsikko 14 px lihavoituna. */
.tyotila :is(.shell:not(.chat-shell)>main,main.content,main.login-card,#kanban-app .board-filters,#kanban-app #board-picker) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=hidden]),select){min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--sade-kentta);font-size:16px}
.tyotila :is(.shell:not(.chat-shell)>main,main.content) textarea{padding:12px 14px;border:1px solid var(--line);border-radius:var(--sade-kentta);font-size:16px}
.tyotila :is(.shell:not(.chat-shell)>main,main.content,main.login-card) label{font-size:14px;font-weight:700}
#chat-search,.tyotila .search input{border-radius:var(--sade-kentta)}
/* Teksti ja linkit: linkit korostusvärillä ilman alleviivausta, pienin teksti 12 px. */
.tyotila :is(.shell:not(.chat-shell)>main,main.content,main.login-card) a:not([class]){color:var(--tt-linkki);font-weight:600;text-decoration:none}
.tyotila .badge{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){
 .message .kupla .body{font-size:16px;line-height:1.35}
 .tyotila .rail a{font-size:12px;font-weight:600}
 .tyotila .rail a[aria-current]{background:color-mix(in srgb,var(--white) 16%,transparent);color:var(--white);border-radius:var(--sade-pieni)}
 .tyotila .rail svg{width:24px;height:24px}
 .tyotila .panel{padding:16px}
}
@media(prefers-reduced-motion:reduce){.tyotila *{transition:none!important;animation:none!important}.tyotila button:active{transform:none}}

/* Liitteet 29.10.2026: kuvaliitteet pienoiskuvina, useamman liitteen esikatselu ennen lähetystä, kuvakatselu */
.tyotila .liitekuvat{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;margin:6px 0 2px}
.tyotila .liitekuva{display:block;line-height:0;border-radius:var(--sade-kentta);overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.tyotila .liitekuva img{display:block;max-width:min(200px,60vw);max-height:200px;width:auto;height:auto;object-fit:cover}
.tyotila .liitekuvat:has(>:nth-child(2)) .liitekuva img{max-width:min(140px,38vw);max-height:140px}
.tyotila .liitekuva:hover,.tyotila .liitekuva:focus-visible{border-color:var(--primary)}
.tyotila .liite-esikatselu{display:flex;flex-wrap:wrap;gap:8px;padding:6px 0}
.tyotila .liite-esikatselu[hidden]{display:none}
.tyotila .liite-esikatselu-kohde{display:flex;align-items:center;gap:6px;padding:4px;border:1px solid var(--line);border-radius:var(--sade-kentta);background:var(--surface);max-width:100%}
.tyotila .liite-esikatselu-kohde .liite-tyyppi{font-size:12px;padding:2px 8px;border-radius:var(--sade-pieni);background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--tt-linkki)}
.tyotila .liite-esikatselu-kohde .liite-koko{font-size:12px;color:var(--text-2)}
.tyotila .liite-esikatselu-kohde span{font-size:14px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tyotila .liite-esikatselu-kohde button{min-height:32px;padding:0 10px;font-size:13px;border-radius:var(--sade-pieni)}
#chat-app .composer>.liite-esikatselu{grid-column:1/-1;grid-row:2}
#chat-app .composer>.mention-picker{grid-row:3}
#chat-app .conversation,#chat-app .thread{position:relative}
.tyotila .pudotus-peite{position:absolute;inset:6px;z-index:40;display:grid;place-items:center;padding:16px;border:2px dashed var(--primary);border-radius:var(--sade-kortti,20px);background:color-mix(in srgb,var(--surface) 90%,transparent);pointer-events:none}
.tyotila .pudotus-peite[hidden]{display:none}
.tyotila .pudotus-peite p{margin:0;padding:12px 20px;border-radius:var(--sade-kentta,14px);background:var(--surface);color:var(--text);font-size:17px;font-weight:700;text-align:center;box-shadow:var(--varjo-valikko,none)}
/* Kuvakatselu 29.10.2026: X, Esc, napautus taustaan ja pyyhkäisy sulkevat; tausta tumma myös tummassa teemassa. */
.kuvakatselu{position:fixed;inset:0;margin:auto;width:fit-content;height:fit-content;min-width:min(280px,92vw);max-width:min(96vw,1200px);max-height:94dvh;padding:10px 12px 12px;border:0;border-radius:var(--sade-kortti,20px);background:var(--surface);color:var(--text);overflow:auto;overscroll-behavior:contain;box-sizing:border-box}
.kuvakatselu:not([open]){display:none}
.kuvakatselu::backdrop{background:var(--kuvakatselu-tausta)}
html.kuvakatselu-auki,html.kuvakatselu-auki body{overflow:hidden}
.kuvakatselu-yla{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.kuvakatselu-nimi{flex:1;min-width:0;font-size:13px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kuvakatselu .kuvakatselu-x{flex:none;width:44px;height:44px;min-height:44px;margin:0;padding:0;border-radius:50%;font-size:26px;line-height:1;background:transparent;color:var(--text);border:1px solid var(--line)}
.kuvakatselu .kuvakatselu-x:hover,.kuvakatselu .kuvakatselu-x:focus-visible{background:var(--panel)}
.kuvakatselu img{display:block;max-width:100%;max-height:calc(94dvh - 130px);margin:0 auto;border-radius:var(--sade-kentta,14px);touch-action:pinch-zoom;-webkit-user-select:none;user-select:none}
.kuvakatselu-virhe{margin:24px 8px;color:var(--text-2)}
.kuvakatselu-rivi{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:10px}
.kuvakatselu-rivi a{color:var(--tt-linkki);font-weight:600;text-decoration:none}

/* Tiimiryhmän avaus ja sulku: ohjeen mukainen kääntyvä nuoli tekstikolmion sijaan (29.10.2026). */
#chat-app .sidebar details>summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
#chat-app .sidebar details>summary::-webkit-details-marker{display:none}
#chat-app .sidebar details>summary::before{content:'';flex:none;width:6px;height:6px;margin:0 2px 0 4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;color:var(--text-2);transform:rotate(-45deg);transition:transform 160ms var(--liike)}
#chat-app .sidebar details[open]>summary::before{transform:rotate(45deg)}
/* Dialogit (Villen ohje, Tommi 29.10.2026): tiivis otsikkorivi, pieni X, 40 px kentät, Tallenna ja Peruuta alaosassa. */
.tyotila dialog{padding:16px 20px 20px;margin:auto}
.tyotila dialog#results{margin:72px auto auto}
.tyotila dialog:focus{outline:none}
.tyotila dialog .dialogi-otsikko{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:0;background:none;border:0}
.tyotila dialog .dialogi-otsikko h2{flex:1;min-width:0;margin:0;font-size:18px;line-height:1.3;font-weight:700}
.tyotila dialog .dialogi-toiminnot{display:flex;align-items:center;gap:4px}
.tyotila dialog button.dialogi-sulje{display:inline-grid;place-items:center;width:32px;height:32px;min-height:32px;padding:0;margin:0;border:0;border-radius:var(--sade-dialogi);background:transparent;color:var(--text-2)}
.tyotila dialog button.dialogi-sulje:hover{background:var(--toissa);color:var(--text)}
.tyotila dialog .dialogi-sulje svg{width:18px;height:18px}
.tyotila dialog button.tekstilinkki{min-height:0;height:auto;padding:4px 6px;margin:0;border:0;border-radius:var(--sade-dialogi);background:transparent;color:var(--tt-linkki);font-size:13px;font-weight:600}
.tyotila dialog button.tekstilinkki:hover:not(:disabled){background:var(--toissa)}
.tyotila dialog button.tekstilinkki:disabled{color:var(--text-2);opacity:.7;cursor:default}
.tyotila dialog .dialogi-meta{margin:0 0 8px;font-size:13px;color:var(--text-2);cursor:help;width:fit-content}
.tyotila dialog label{font-size:13px;font-weight:600;color:var(--text);margin:12px 0 4px}
.tyotila dialog fieldset label{margin:0;min-height:36px;font-weight:500}
.tyotila dialog fieldset{border-radius:var(--sade-dialogi);padding:4px 12px 8px;margin:12px 0 0}
.tyotila dialog legend{font-size:13px;font-weight:600;padding:0 4px}
.tyotila dialog :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=hidden]),select){min-height:40px;height:40px;padding:8px 12px;margin:0;border:1px solid var(--line);border-radius:var(--sade-dialogi);font-size:15px}
.tyotila dialog textarea{min-height:88px;padding:8px 12px;margin:0;border:1px solid var(--line);border-radius:var(--sade-dialogi);font-size:15px}
.tyotila dialog button:not(.icon-button):not(.result):not(.tekstilinkki):not(.ilmoitusrivi){min-height:40px;padding:0 16px;margin:0;border-radius:var(--sade-dialogi);font-size:15px;font-weight:700}
.tyotila dialog button.secondary:not(.icon-button):not(.result){background:var(--toissa);color:var(--text);border-color:transparent}
.tyotila dialog .dialogi-alaosa{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.tyotila dialog form>button,.tyotila dialog .toolbar button{margin:8px 8px 0 0}
/* Ilmoitukset: tiiviit rivit ohuin erottimin, lukematon pisteenä. */
.tyotila .ilmoituslista{display:flex;flex-direction:column;margin:0 -20px}
.tyotila dialog button.ilmoitusrivi{display:grid;grid-template-columns:32px minmax(0,1fr) auto 8px;align-items:center;gap:12px;width:100%;min-height:60px;padding:10px 20px;margin:0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;color:var(--text);font:inherit;font-weight:400;text-align:left;transform:none}
.tyotila dialog button.ilmoitusrivi:first-child{border-top:0}
.tyotila dialog button.ilmoitusrivi:hover{background:var(--toissa)}
.tyotila .ilmoitusrivi .avatar{width:32px;height:32px;font-size:12px}
.tyotila .ilmoitus-teksti{display:flex;flex-direction:column;min-width:0;gap:2px}
.tyotila .ilmoitus-otsikko,.tyotila .ilmoitus-esikatselu{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tyotila .ilmoitus-otsikko{font-size:14px;line-height:1.35}
.tyotila .ilmoitus-otsikko strong{font-weight:700}
.tyotila .ilmoitus-esikatselu{font-size:13px;line-height:1.35;color:var(--text-2)}
.tyotila .ilmoitus-aika{font-size:12px;color:var(--text-2);white-space:nowrap}
.tyotila .lukematon-piste{width:8px;height:8px;border-radius:50%;background:var(--primary)}
.tyotila .ilmoitusrivi:not(.lukematon) .ilmoitus-otsikko{color:var(--text-2)}
.tyotila .ilmoitusrivi:not(.lukematon) .ilmoitus-otsikko strong{color:var(--text)}
.tyotila .ilmoitukset-tyhja{margin:8px 0;font-size:14px;color:var(--text-2)}

/* Tee kanban-tehtävä: ketjun otsikkorivi ja AI-ehdotusrivi, tiivis Villen ohjeen mukaan. */
.ketju-otsikko{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tehtava-ai{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.tehtava-ai button{min-height:36px}
.tyotila .ketju-otsikko button.tekstilinkki{min-height:0;padding:4px 6px;margin:0;border:0;background:transparent;color:var(--tt-linkki);font-size:13px;font-weight:600}
#task-assignees .valinta{display:flex;align-items:center;gap:6px;min-height:32px}
/* Kalenteri ja tyyliohjeen korjaukset (Tommi 29.10.2026). Vain muuttujia, ei suoria värejä. */
.tyotila .rail{grid-auto-flow:row}
@media(max-width:700px){.tyotila .rail,.settings-shell .rail,#kanban-app .rail{grid-template-columns:repeat(5,minmax(0,1fr))}.tyotila .rail a{font-size:11px;padding:0 2px;text-align:center;overflow-wrap:anywhere}}
/* Viestin toimintovalikko: pystylista, koko teksti näkyy myös 390 px leveällä. */
.message-actions[open] .toolbar,.message>.kupla .message-actions[open] .toolbar{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:2px;min-width:200px;max-width:min(260px,80vw);padding:6px;box-shadow:var(--varjo-valikko);border-radius:var(--sade-kortti)}
.message-actions .toolbar button,.message-actions .toolbar button:last-of-type{width:auto;height:auto;min-height:44px;padding:8px 12px;font-size:14px;font-weight:600;text-align:left;white-space:nowrap;background:transparent;color:var(--text);border:0;border-radius:var(--sade-pieni)}
.message-actions .toolbar button:hover,.message-actions .toolbar button:focus-visible{background:var(--toissa)}
.message-actions .toolbar select{width:100%}
/* Sivupalkin toiminnot kompakteiksi toissijaisiksi napeiksi. */
#chat-app .sidebar>.toolbar{gap:6px}
#chat-app .sidebar>.toolbar button{min-height:36px;padding:6px 12px;font-size:13px;line-height:1.2}
/* Hakutulokset rivinä, ei laatikkoina. */
.tyotila dialog button.result{margin:0;background:transparent;border-radius:0;border-bottom:1px solid var(--line)}
.tyotila dialog button.result:hover,.tyotila dialog button.result:focus-visible{background:var(--toissa)}
/* Tee kanban-tehtävä: runko vierii, alapalkki pysyy näkyvissä, vastuuhenkilöt siruina. */
.tyotila #task-dialog{max-height:min(800px,92dvh);overflow:auto;padding-bottom:0}
#task-dialog .dialogi-otsikko{position:sticky;top:-16px;z-index:2;background:var(--surface);padding-top:4px}
#task-dialog .dialogi-alaosa{position:sticky;bottom:0;z-index:2;background:var(--surface);margin:12px -20px 0;padding:12px 20px 16px;border-top:1px solid var(--line)}
#task-dialog textarea{min-height:72px}
#task-dialog label{margin:10px 0 4px}
#task-dialog fieldset#task-assignees{display:flex;flex-wrap:wrap;gap:6px;max-height:none;overflow:visible;border:0;padding:0;margin:12px 0 0}
#task-dialog #task-assignees legend{font-weight:700;font-size:14px;padding:0;margin-bottom:6px;width:100%}
#task-dialog #task-assignees label{display:inline-flex;width:auto;min-height:36px;margin:0;gap:6px;padding:4px 12px;border:1px solid var(--line);border-radius:var(--sade-nappi);font-weight:600;font-size:13px;cursor:pointer}
#task-dialog #task-assignees label:has(input:checked){background:var(--toissa);border-color:var(--primary)}
#task-dialog #task-assignees input{width:16px;height:16px;min-height:0;margin:0}
/* Kalenteri: Roundcuben asettelu, HallaBitin värit (Villen tyyliohjeen muuttujat). */
.tyotila main>.content:has(#kalenteri-app){margin:0;max-width:none;padding:0}
.tyotila main:has(#kalenteri-app)>.viewhead{display:none}
#kalenteri-app{--kal-tunti:44px;--kal-aikaleveys:60px;--kal-tanaan:color-mix(in srgb,var(--sky) 10%,var(--surface));--kal-viikonloppu:color-mix(in srgb,var(--navy) 4%,var(--surface));--kal-puolitunti:color-mix(in srgb,var(--line) 45%,transparent);position:relative;display:flex;flex-direction:column;gap:10px;padding:16px 20px 24px;box-sizing:border-box;min-width:0}
.kal-haku{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--sade-kentta);background:var(--surface);padding:0 12px;min-height:40px;color:var(--text-2)}
.kal-haku svg{width:18px;height:18px;flex:none}
#kalenteri-app .kal-haku input{border:0;outline:0;background:transparent;min-height:38px;padding:0;flex:1;font-size:14px;color:var(--text);box-shadow:none}
.kal-haku:focus-within{border-color:var(--focus);box-shadow:0 0 0 3px var(--primary-light)}
.kal-tyokalut{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.kal-nakymat{display:inline-flex;justify-self:start;border:1px solid var(--line);border-radius:var(--sade-nappi);overflow:hidden;background:var(--surface)}
#kalenteri-app .kal-nakymat button{min-height:36px;padding:0 14px;border:0;border-radius:0;background:transparent;color:var(--text);font-size:13px;font-weight:600;box-shadow:none}
#kalenteri-app .kal-nakymat button+button{border-left:1px solid var(--line)}
#kalenteri-app .kal-nakymat button[aria-pressed=true]{background:var(--navy);color:var(--white)}
#kalenteri-app .kal-nakymat button:not([aria-pressed=true]):hover{background:var(--toissa)}
.kal-otsikko{text-align:center;min-width:0}
.kal-otsikko h2{margin:0;font-size:18px;font-weight:700;color:var(--text)}
.kal-vyohyke{margin:2px 0 0;font-size:12px;color:var(--text-2)}
.kal-siirto{display:inline-flex;justify-self:end;align-items:center;border:1px solid var(--line);border-radius:var(--sade-nappi);overflow:hidden;background:var(--surface)}
#kalenteri-app .kal-siirto button{min-height:36px;padding:0 14px;border:0;border-radius:0;background:transparent;color:var(--text);font-size:13px;font-weight:600;box-shadow:none}
#kalenteri-app .kal-siirto button.kal-nuoli{width:36px;padding:0;display:inline-flex;align-items:center;justify-content:center}
#kalenteri-app .kal-siirto button+button{border-left:1px solid var(--line)}
#kalenteri-app .kal-siirto button:hover{background:var(--toissa)}
.kal-nuoli svg{width:18px;height:18px}
.kal-tilarivi{display:flex;align-items:center;gap:8px;min-height:0}
.kal-tilarivi p{margin:0;font-size:13px}
.kal-tilarivi p:empty{display:none}
#kalenteri-app .kal-tilarivi button{min-height:32px;padding:0 12px;font-size:13px;margin-left:auto}
/* Viikko- ja päiväruudukko */
.kal-ruudukko{border:1px solid var(--line);border-radius:var(--sade-kortti);background:var(--surface);overflow:hidden;display:flex;flex-direction:column}
/* Yksi yhteinen saraketemplaatti kaikille riveille; otsikko ja koko päivä -rivi varaavat vierityspalkin
   leveyden (--kal-gutter, mitataan JS:llä), joten päiväsarakkeet osuvat tuntiruudukon kohdalle (29.10.2026). */
.kal-rivi{display:grid;grid-template-columns:var(--kal-aikaleveys) repeat(var(--kal-paivia),minmax(0,1fr));box-sizing:border-box;min-width:0}
.kal-rivi>*{box-sizing:border-box;min-width:0}
.kal-paaotsikot,.kal-kokopaiva{padding-right:var(--kal-gutter,0px)}
.kal-paaotsikot{border-bottom:1px solid var(--line);background:var(--surface)}
#kalenteri-app .kal-paaotsikko{min-height:34px;padding:0 4px;border:0;border-left:1px solid var(--line);border-radius:0;background:transparent;color:var(--text);font-size:13px;font-weight:700;box-shadow:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#kalenteri-app .kal-paaotsikko:hover{background:var(--toissa)}
#kalenteri-app .kal-paaotsikko.kal-tama-paiva{background:var(--kal-tanaan);color:var(--tt-linkki)}
.kal-kokopaiva{border-bottom:3px double var(--line);min-height:34px}
.kal-aikaotsikko{font-size:12px;color:var(--text-2);padding:8px 6px;text-align:right}
.kal-kokopaiva-solu{border-left:1px solid var(--line);padding:3px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kal-viikonloppu{background:var(--kal-viikonloppu)}
.kal-tama-paiva{background:var(--kal-tanaan)}
.kal-vieritys{overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;max-height:calc(100dvh - 260px);min-height:320px;overscroll-behavior:contain}
.kal-tunnit{position:relative}
.kal-aikasarake{display:flex;flex-direction:column}
.kal-tunti{height:var(--kal-tunti);box-sizing:border-box;padding:2px 8px 0 0;text-align:right;font-size:12px;color:var(--text-2);border-top:1px solid var(--line)}
.kal-tunti:first-child{border-top-color:transparent}
.kal-sarake{position:relative;height:calc(var(--kal-tunti)*24);border-left:1px solid var(--line);background-image:linear-gradient(to bottom,var(--line) 1px,transparent 1px),linear-gradient(to bottom,var(--kal-puolitunti) 1px,transparent 1px);background-size:100% var(--kal-tunti),100% var(--kal-tunti);background-position:0 0,0 calc(var(--kal-tunti)/2)}
.kal-nyt{position:absolute;left:0;right:0;height:2px;background:var(--primary);z-index:3;pointer-events:none}
.kal-nyt::before{content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--primary)}
/* Tapahtumat */
#kalenteri-app button.kal-tapahtuma{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-height:0;width:100%;padding:3px 6px;border:0;border-left:3px solid var(--primary);border-radius:var(--sade-pieni);background:color-mix(in srgb,var(--primary) 14%,var(--surface));color:var(--text);font-size:12px;font-weight:600;text-align:left;line-height:1.25;box-shadow:none;overflow:hidden;cursor:pointer}
#kalenteri-app .kal-sarake button.kal-tapahtuma{position:absolute;z-index:2}
#kalenteri-app button.kal-tapahtuma:hover,#kalenteri-app button.kal-tapahtuma:focus-visible{background:color-mix(in srgb,var(--primary) 24%,var(--surface));outline:2px solid var(--focus);outline-offset:-2px}
#kalenteri-app button.kal-tapahtuma .kal-aika{font-size:11px;font-weight:700;color:var(--tt-linkki)}
#kalenteri-app button.kal-tapahtuma .kal-nimi{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#kalenteri-app .kal-sarake button.kal-tapahtuma:not(.kal-lyhyt) .kal-nimi{white-space:normal}
#kalenteri-app button.kal-tapahtuma.kal-lyhyt{flex-direction:row;gap:6px;align-items:center}
#kalenteri-app button.kal-tapahtuma.kal-varattu{border-left-color:var(--text-2);background:repeating-linear-gradient(135deg,var(--toissa) 0 6px,var(--surface) 6px 12px);color:var(--text)}
#kalenteri-app button.kal-tapahtuma.kal-varattu .kal-aika{color:var(--text-2)}
#kalenteri-app button.kal-tapahtuma.kal-vapaa{border-left-style:dashed;opacity:.8}
/* Kuukausi */
.kal-kuukausi{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--sade-kortti);overflow:hidden;background:var(--surface)}
.kal-kk-otsikko{padding:8px;font-size:13px;font-weight:700;text-align:center;border-bottom:1px solid var(--line)}
.kal-kk-paiva{min-height:104px;padding:4px;border-top:1px solid var(--line);border-left:1px solid var(--line);display:flex;flex-direction:column;gap:2px;min-width:0}
.kal-kk-paiva:nth-child(7n+8){border-left:0}
.kal-kk-paiva.kal-muu-kk{color:var(--text-2)}
.kal-kk-paiva.kal-muu-kk .kal-kk-numero{opacity:.6}
#kalenteri-app .kal-kk-numero{align-self:flex-end;min-height:26px;min-width:26px;padding:0 6px;border:0;border-radius:var(--sade-nappi);background:transparent;color:inherit;font-size:13px;font-weight:700;box-shadow:none}
#kalenteri-app .kal-kk-paiva.kal-tama-paiva .kal-kk-numero{background:var(--primary);color:var(--white)}
#kalenteri-app .kal-kk-paiva button.kal-tapahtuma{flex-direction:row;gap:4px;padding:2px 4px}
#kalenteri-app .kal-lisaa{min-height:22px;padding:0 4px;border:0;background:transparent;color:var(--tt-linkki);font-size:12px;font-weight:700;text-align:left;box-shadow:none}
/* Asialista */
.kal-asialista{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--sade-kortti);background:var(--surface);overflow:hidden}
.kal-as-paiva{display:flex;flex-direction:column;gap:4px;padding:8px 12px 12px;border-top:1px solid var(--line)}
.kal-as-paiva:first-child{border-top:0}
.kal-as-paiva h3{margin:4px 0;font-size:13px;font-weight:700;text-transform:capitalize}
.kal-as-paiva.kal-tama-paiva h3{color:var(--tt-linkki)}
#kalenteri-app button.kal-tapahtuma.kal-as-rivi{flex-direction:row;gap:12px;padding:8px 10px;font-size:14px}
#kalenteri-app button.kal-tapahtuma.kal-as-rivi .kal-aika{min-width:92px;font-size:13px}
.kal-asialista .kal-tyhja{padding:16px;margin:0}
/* Tapahtuman tiedot */
.kal-popover{position:absolute;z-index:30;width:300px;max-width:calc(100% - 16px);background:var(--surface);border:1px solid var(--line);border-radius:var(--sade-kortti);box-shadow:var(--varjo-valikko);padding:12px 14px 14px}
.kal-popover[hidden]{display:none}
.kal-pop-paa{display:flex;align-items:flex-start;gap:8px}
.kal-pop-paa h3{flex:1;margin:4px 0 0;font-size:16px;overflow-wrap:anywhere}
.kal-popover dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0 0;font-size:13px}
.kal-popover dt{color:var(--text-2);font-weight:600}
.kal-popover dd{margin:0;overflow-wrap:anywhere}
/* Sivupalkki: minikalenteri ja kalenterilista */
.kal-taitto>summary{display:none}
.kal-mini{margin:4px 0 12px}
.kal-mini-paa{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-size:14px}
.tyotila .kal-mini-paa .kal-nuoli{width:32px;min-height:32px;padding:0;border:0;background:transparent;color:var(--text);box-shadow:none;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--sade-pieni)}
.tyotila .kal-mini-paa .kal-nuoli:hover{background:var(--toissa)}
.kal-mini-ruudut{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.kal-mini-vp{font-size:11px;font-weight:700;color:var(--text-2);padding:2px 0}
.tyotila .kal-mini-paiva{min-height:30px;padding:0;border:0;border-radius:var(--sade-pieni);background:transparent;color:var(--text);font-size:12px;font-weight:500;box-shadow:none}
.tyotila .kal-mini-paiva:hover{background:var(--toissa)}
.tyotila .kal-mini-paiva.kal-muu-kk{color:var(--text-2);opacity:.6}
.tyotila .kal-mini-paiva.kal-valittu{background:var(--kal-mini-valittu,color-mix(in srgb,var(--primary) 12%,var(--surface)))}
.tyotila .kal-mini-paiva.kal-tama-paiva{background:var(--primary);color:var(--white);font-weight:700}
.kal-sivu-otsikko{margin:14px 0 6px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2)}
.kal-kalenterit{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.tyotila .kal-kytkin{display:flex;align-items:center;gap:10px;min-height:36px;font-size:14px;font-weight:600;cursor:pointer}
.tyotila .kal-kytkin.kal-sisennys{padding-left:18px;font-weight:500}
.tyotila .kal-kytkin input{appearance:none;-webkit-appearance:none;flex:none;width:32px;height:18px;min-height:0;margin:0;padding:0;border-radius:999px;background:var(--line);position:relative;cursor:pointer;transition:background .15s}
.tyotila .kal-kytkin input::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--surface);transition:transform .15s}
.tyotila .kal-kytkin input:checked{background:var(--primary)}
.tyotila .kal-kytkin input:checked::after{transform:translateX(14px)}
.tyotila .kal-kytkin input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.kal-vari{width:10px;height:10px;border-radius:3px;flex:none}
.kal-vari-oma{background:var(--primary)}
.kal-vari-tiimi{background:repeating-linear-gradient(135deg,var(--text-2) 0 2px,var(--surface) 2px 4px);border:1px solid var(--text-2)}
.kal-ohje{font-size:12px;margin:6px 0}
.kal-tanaan-lista{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:4px}
.kal-tanaan-lista .kal-tapahtuma{display:flex;flex-direction:column;padding:6px 8px;border-left:3px solid var(--primary);border-radius:var(--sade-pieni);background:var(--toissa);font-size:13px}
.kal-tanaan-lista .kal-aika{font-size:12px;font-weight:700;color:var(--text-2)}
.kal-tyhja{font-size:12px}
.kal-sivu>details>a{display:inline-flex;align-items:center;min-height:40px;font-weight:600}
/* Kokousdialogin päivän tapahtumat */
.kal-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.kal-kokous{margin:8px 0 4px;padding:10px;border:1px solid var(--line);border-radius:var(--sade-pieni);background:var(--panel)}
.kal-kokous .kal-tapahtuma{display:flex;gap:8px;font-size:13px}
.kal-kokous .kal-aika{font-weight:700;color:var(--text-2)}
.kal-pieni-otsikko{margin:0 0 6px;font-size:12px;font-weight:700;color:var(--text-2)}
/* Kalenterin asetukset */
.kalenteri-asetukset .kal-tyyppi,.kalenteri-asetukset fieldset{border:0;padding:0;margin:12px 0}
.kalenteri-asetukset fieldset label{display:flex;align-items:center;gap:10px;font-weight:600}
.kalenteri-asetukset fieldset input{width:18px;height:18px;min-height:0}
.kalenteri-asetukset .toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.kalenteri-asetukset form input[type=url],.kalenteri-asetukset form input[type=text],.kalenteri-asetukset form input[type=password]{width:100%;max-width:560px}
@media(max-width:700px){
#kalenteri-app{padding:12px 12px 96px;--kal-aikaleveys:48px}
.kal-tyokalut{grid-template-columns:1fr auto;grid-template-areas:"nak nak" "ots siir";row-gap:10px}
.kal-nakymat{grid-area:nak;display:flex;width:100%}
#kalenteri-app .kal-nakymat button{flex:1;padding:0 6px;min-height:40px}
.kal-otsikko{grid-area:ots;text-align:left}
.kal-otsikko h2{font-size:16px}
.kal-siirto{grid-area:siir}
#kalenteri-app .kal-siirto button{min-height:40px}
.kal-vieritys{max-height:calc(100dvh - 300px)}
.kal-ruudukko:has(.kal-rivi[style]){overflow-x:auto}
#kalenteri-app[data-nakyma=viikko] .kal-ruudukko>.kal-rivi,#kalenteri-app[data-nakyma=viikko] .kal-vieritys{min-width:640px}
#kalenteri-app[data-nakyma=viikko] .kal-ruudukko{overflow-x:auto}
.kal-kk-paiva{min-height:64px;padding:2px}
#kalenteri-app .kal-kk-paiva button.kal-tapahtuma .kal-aika{display:none}
#kalenteri-app .kal-kk-paiva button.kal-tapahtuma{font-size:10px;padding:1px 3px}
.kal-popover{position:fixed;left:8px!important;right:8px;bottom:88px;top:auto!important;width:auto;max-width:none}
.kal-sivu{padding-bottom:4px}
.kal-sivu>.eyebrow{display:none}
.kal-taitto>summary{display:flex;align-items:center;min-height:44px;font-weight:700;cursor:pointer;color:var(--tt-linkki)}
}
#kalenteri-app button.kal-tapahtuma{border-radius:0 var(--sade-pieni) var(--sade-pieni) 0}
#kalenteri-app button.kal-tapahtuma.kal-lyhyt{padding-top:1px;padding-bottom:1px}
#kalenteri-app button.kal-tapahtuma.kal-lyhyt .kal-aika{white-space:nowrap;flex:none}
#kalenteri-app button.kal-tapahtuma.kal-lyhyt .kal-nimi{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tyotila .kal-sivu .kal-kalenterit li{margin:0;padding:0;min-height:0;border:0;background:transparent}
.tyotila .kal-sivu .kal-kytkin{min-height:32px}
#kalenteri-app button.kal-tapahtuma.kal-kk-chip{flex-direction:row;align-items:center;gap:5px;padding:2px 6px}
#kalenteri-app button.kal-tapahtuma.kal-kk-chip .kal-aika{flex:none;white-space:nowrap}
#kalenteri-app button.kal-tapahtuma.kal-kk-chip .kal-nimi{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#kalenteri-app .kal-haku input,#kalenteri-app .kal-haku input:focus{border:0;box-shadow:none;background:transparent;min-height:40px;padding:0 8px}
#kalenteri-app .kal-haku:focus-within{outline:2px solid var(--focus);outline-offset:1px}
#kalenteri-app .kal-popover [data-kal=sulje]{flex:none;width:32px;height:32px;min-height:0;padding:0;border:0;border-radius:var(--sade-pieni);background:transparent;color:var(--text-2);box-shadow:none;display:grid;place-items:center}
#kalenteri-app .kal-popover [data-kal=sulje]:hover{background:var(--toissa);color:var(--text)}
.tyotila .kal-sivu .kal-tapahtuma{border-radius:0 var(--sade-pieni) var(--sade-pieni) 0}
.tyotila .kal-sivu .kal-teksti{display:flex;flex-direction:column;min-width:0}
@media(max-width:700px){.kal-taitto>summary{justify-content:space-between;padding:0 12px;border:1px solid var(--line);border-radius:var(--sade-kentta);background:var(--surface);list-style:none}.kal-taitto>summary::-webkit-details-marker{display:none}.kal-taitto>summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px}.kal-taitto[open]>summary::after{transform:rotate(-135deg);margin-top:4px}}
#kalenteri-app .kal-popover [data-kal=sulje] svg{width:18px;height:18px}
#kalenteri-app #kal-haku{border:0!important;box-shadow:none!important;background:transparent!important;min-height:38px!important;padding:0 8px!important;font-size:14px!important;border-radius:0!important}
.tyotila .kal-sivu .kal-taitto{display:block;width:auto;font-size:inherit;vertical-align:baseline}
#kalenteri-app button.kal-tapahtuma,.tyotila .kal-sivu .kal-tapahtuma{border-radius:0 6px 6px 0}
@media(max-width:700px){.tyotila .rail a{font-size:10px;overflow-wrap:normal;word-break:normal;letter-spacing:-.01em}}
.tyotila[data-theme-mode="dark"] main.login-card a:not([class]){color:color-mix(in srgb,var(--primary) 35%,var(--teksti))}
.tyotila[data-theme-mode="dark"] .kal-mini-paiva.kal-tama-paiva,.tyotila[data-theme-mode="dark"] #kalenteri-app .kal-kk-paiva.kal-tama-paiva .kal-kk-numero{color:var(--tausta)}

/* Teams-tyyliset viestit ja kirjoituskenttä (HB UI -katselmointi 29.10.2026, Villen ohje):
   muiden viestit toissijaisella pinnalla ilman reunaa, omat korostuksen sävyllä oikealla, nimi ja aika
   otsikkorivillä. Kirjoituskenttä on yksi pyöristetty laatikko: teksti ylhäällä, liite ja Lähetä alla. */
.message>.kupla{border:0;background:var(--toissa);border-radius:var(--sade-kentta);padding:8px 44px 10px 14px;box-shadow:var(--varjo-kortti)}
.message.oma>.kupla{background:color-mix(in srgb,var(--primary) 12%,var(--surface));border:0}
.message>.kupla>strong{font-size:14px;font-weight:700}
.message .kupla>time,#chat-app .message .kupla>time{color:var(--text-2)}
.message .kupla .body{font-size:16px;line-height:1.35}
#chat-app .composer{grid-template-columns:auto minmax(0,1fr) auto;gap:4px 8px;margin:8px 16px 12px;padding:4px 8px 8px;border:1px solid var(--line);border-radius:var(--sade-kentta);background:var(--surface);box-shadow:var(--varjo-kortti);transition:border-color 160ms var(--liike)}
#chat-app .composer:focus-within{border-color:var(--primary);box-shadow:inset 0 -2px 0 var(--primary)}
#chat-app .composer>textarea{grid-column:1/-1;grid-row:1;border:0;background:transparent;min-height:48px;height:48px;padding:12px 8px;font-size:16px}
#chat-app .composer>textarea:focus-visible{outline:0}
#chat-app .composer>button[type=submit]{grid-column:3;grid-row:2;border-radius:var(--sade-pieni);padding:0 20px;font-weight:700}
#chat-app .composer>.mention-picker{grid-column:1/-1;grid-row:3}
@media(max-width:700px){#chat-app .composer{margin:6px 8px 8px;padding:4px 6px;gap:6px}#chat-app .composer>textarea{grid-column:2;grid-row:1;min-height:44px;height:44px;padding:10px 6px}#chat-app .composer>button[type=submit]{grid-row:1;padding:0 14px}#chat-app .composer>.mention-picker{grid-row:2}}
/* Ohjeen paneeli: sivupalkki on kortin värinen, valittu kanava toissijaisella pinnalla. */
.tyotila .channel-button.active{background:var(--toissa)}
/* Vanhan kanbanin tuonti 29.10.2026: Villen ohjeen napit myös linkkinapeille, luvut ruudukkona. */
.tyotila .kanban-tuonti .toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;align-items:center}
.tyotila .kanban-tuonti .toolbar form{margin:0;max-width:none}
.tyotila .kanban-tuonti a.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:var(--sade-nappi);background:var(--navy);color:var(--white);font-size:16px;font-weight:700;text-decoration:none}
.tyotila .kanban-tuonti a.button.secondary{background:var(--toissa);color:var(--text)}
.tyotila .kanban-tuonti label.valinta{display:flex;align-items:center;gap:10px;font-weight:600}
.tyotila .kanban-tuonti label.valinta input{min-height:0;width:20px;height:20px;margin:0}
.tyotila .kanban-tuonti input[type=file]{display:block;width:100%;border-radius:var(--sade-kentta)}
.tyotila .kanban-tuonti select{display:block;width:100%;border-radius:var(--sade-kentta)}
.tyotila .tuonti-luvut{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:16px 0}
.tyotila .tuonti-luvut div{background:var(--toissa);border-radius:var(--sade-kentta);padding:12px 14px}
.tyotila .tuonti-luvut dt{font-size:13px;color:var(--text-2)}
.tyotila .tuonti-luvut dd{margin:4px 0 0;font-size:22px;font-weight:700;color:var(--text)}
.tyotila .tuonti-taulut{width:100%;border-collapse:collapse;margin:8px 0 12px}
.tyotila .tuonti-taulut :is(th,td){text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
.tyotila .tuonti-taulut :is(th,td):not(:first-child){text-align:right;width:6em}
/* HallaLink-paluu: SVG-nuoli tekstimerkin sijaan (UI-auditointi 29.10.2026). */
.hallalink-paluu{gap:6px}.hallalink-paluu-nuoli{flex:none;display:block}

/* Keskustelun vieritys iPhonessa (29.10.2026): ei hyppyjä, liukuvieritys toimii. */
.tyotila #messages,.tyotila .thread{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.tyotila .liitekuva{width:min(200px,60vw);aspect-ratio:4/3}
.tyotila .liitekuvat:has(>:nth-child(2)) .liitekuva{width:min(140px,38vw);aspect-ratio:1/1}
.tyotila .liitekuva img,.tyotila .liitekuvat:has(>:nth-child(2)) .liitekuva img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.tyotila .uudet-viestit{align-self:center;position:relative;z-index:3;margin:-46px auto 8px;border-radius:999px;box-shadow:var(--varjo-nosto)}
.tyotila .uudet-viestit[hidden]{display:none}
.tyotila .message.odottaa .kupla{opacity:.72}
.tyotila .message.odottaa.epaonnistui .kupla{opacity:1;outline:1px solid var(--virhe-reuna)}
.tyotila .odottava-teksti{white-space:pre-wrap;overflow-wrap:anywhere}
.tyotila .message.odottaa .toolbar{margin-top:4px}
/* Keskustelun tausta ja puhekuplat teemoittain. Kupla mukautuu sisältöön
   (työpöytä enintään 65 %, puhelin 80 %), 18 px pyöristys, nuoli puhujan puolella vain ryhmän ensimmäisessä
   kuplassa, ryhmän sisällä tiiviimmin. Muiden kuplat vaaleimpana pintana varjolla, omat HallaBit-sinisellä.
   Kaikki värit muuttujina /tyotila/theme.css:stä: Vaalea ja Tumma. Ei kuvioita. */
.tyotila .conversation>#messages,.tyotila #thread-messages{background:var(--chat-tausta)}
.tyotila .thread{background:var(--chat-tausta)}
.tyotila .conversation>#messages{padding:8px 16px 16px}
.tyotila #messages .message,.tyotila #thread-messages .message{margin:12px 0 0;gap:8px;align-items:flex-start}
.tyotila .message.oma{padding-right:8px}
.tyotila .message:not(.oma)>.avatar~.kupla{margin-left:8px}
.tyotila .message>.kupla{background:var(--kupla-muu);color:var(--kupla-teksti);box-shadow:var(--kupla-varjo);flex:0 1 auto;width:auto;min-width:88px;max-width:65%;position:relative;border:0;border-radius:18px;padding:6px 12px;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.tyotila .message.oma>.kupla{background:var(--kupla-oma);color:var(--kupla-oma-teksti);box-shadow:var(--kupla-oma-varjo)}
/* Nuoli: kuplan oma pinta (background:inherit) kaarevana kärkenä yläkulmassa, ei filtteriä (pinoamiskonteksti). */
.tyotila .message:not(.jatko)>.kupla{border-top-left-radius:0}
.tyotila .message.oma:not(.jatko)>.kupla{border-top-left-radius:18px;border-top-right-radius:0}
.tyotila .message:not(.jatko)>.kupla::before{content:'';position:absolute;top:0;left:-8px;width:10px;height:14px;background:inherit;clip-path:path('M0 0H10V14C7.6 8.2 4.2 3.4 1 1.7C0.3 1.3 0 0.7 0 0Z');pointer-events:none}
.tyotila .message.oma:not(.jatko)>.kupla::before{left:auto;right:-8px;transform:scaleX(-1)}
/* Ryhmän jatkoviesti: ei nimeä eikä kuvaa uudestaan, kuplat lähempänä toisiaan, nuoli vain ensimmäisessä. */
.tyotila #messages .message.jatko,.tyotila #thread-messages .message.jatko{margin-top:2px}
.tyotila .message.jatko>.avatar{visibility:hidden}
.tyotila .message.jatko>.kupla>strong{display:none}
.tyotila .message.jatko>.kupla{border-radius:6px 18px 18px 18px}
.tyotila .message.oma.jatko>.kupla{border-radius:18px 6px 18px 18px}
.tyotila .message>.avatar{align-self:flex-start;width:32px;height:32px;min-width:32px}
.tyotila .message>.kupla>strong{display:block;font-size:13px;font-weight:700;margin-bottom:2px;color:var(--kupla-nimi)}
.tyotila .message.oma>.kupla>strong{display:none}
.tyotila .kupla-ala{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin:2px 0 0 12px;font-size:12px;line-height:1.2;color:var(--kupla-aika)}
.tyotila .kupla-ala time,.tyotila .kupla-ala .read-receipt,.tyotila #chat-app .message .kupla-ala time{font-size:12px;color:var(--kupla-aika);margin:0}
.tyotila .message.oma .kupla-ala,.tyotila .message.oma .kupla-ala time,.tyotila .message.oma .kupla-ala .read-receipt,.tyotila #chat-app .message.oma .kupla-ala time{color:var(--kupla-oma-aika)}
.tyotila .message .kupla .body{color:inherit}
.tyotila .message.oma .kupla .body a{color:inherit;text-decoration:underline}
.tyotila .message.oma .kupla code,.tyotila .message.oma .kupla pre{background:var(--lainaus-oma-tausta);color:inherit}
.tyotila .message .kupla .liitekuvat{margin:4px 0}
.tyotila .message .kupla .liitekuva{border-radius:12px;overflow:hidden;border:0}
/* Toiminnot (···): hiiren kanssa kuplan päällä pienenä nappina (ei varattua tyhjää reunaa), kosketuksella
   aina näkyvissä, joten tilaa varataan vain silloin. */
.tyotila .message>.kupla .message-actions{top:2px;right:2px}
.tyotila .message>.kupla .message-actions>summary{min-width:32px;min-height:28px;padding:4px 6px;line-height:20px;border-radius:14px;background:var(--kupla-muu);color:var(--kupla-aika)}
.tyotila .message.oma>.kupla .message-actions>summary{background:var(--kupla-oma);color:var(--kupla-oma-aika)}
@media(hover:none){.tyotila .message>.kupla{padding-right:40px}.tyotila .message>.kupla .message-actions{top:0;right:0}.tyotila .message>.kupla .message-actions>summary{min-width:40px;min-height:40px;padding:8px;background:transparent}}
@media(max-width:700px){.tyotila .message>.kupla{max-width:80%}.tyotila .conversation>#messages{padding:8px 16px 12px}}
/* Lainausvastaus: lainattu viesti pienenä sävytettynä lohkona, napautus siirtyy alkuperäiseen. */
.tyotila .kupla .lainaus{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;min-height:0;margin:2px 0 4px;padding:5px 8px;background:var(--lainaus-tausta);color:inherit;border:0;border-left:3px solid var(--lainaus-reuna);border-radius:8px;text-align:left;font-size:13px;line-height:1.3;cursor:pointer}
.tyotila .kupla .lainaus strong{font-size:12px;color:var(--kupla-nimi)}
.tyotila .kupla .lainaus span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--kupla-aika)}
.tyotila .message.oma .kupla .lainaus{background:var(--lainaus-oma-tausta);border-left-color:var(--lainaus-oma-reuna)}
.tyotila .message.oma .kupla .lainaus strong{color:var(--kupla-oma-teksti)}
.tyotila .message.oma .kupla .lainaus span{color:var(--kupla-oma-aika)}
.tyotila .kupla .lainaus.poistettu{cursor:default;font-style:italic}
.tyotila .kupla .lainaus.poistettu:disabled{opacity:1}
.tyotila .message.korostus>.kupla{animation:tt-korostus 1.8s ease-out}
@keyframes tt-korostus{0%,40%{box-shadow:0 0 0 4px var(--korostus)}100%{box-shadow:var(--kupla-varjo)}}
.tyotila .lainaus-esikatselu{display:flex;align-items:center;gap:8px;margin:0 0 6px;padding:6px 6px 6px 10px;background:var(--toissa);border-left:3px solid var(--primary);border-radius:8px}
.tyotila .lainaus-esikatselu[hidden]{display:none}
.tyotila .lainaus-sisalto{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px}
.tyotila .lainaus-sisalto span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-2)}
.tyotila .lainaus-esikatselu .icon-button{min-width:44px;padding:8px}
/* Esikatselu kirjoituskentän yläpuolella, ei kentän ruudukossa: pitkä lainaus ei levennä näkymää (390 px). */
#chat-app .lainaus-esikatselu{margin:8px 16px 0;min-width:0;flex:none}
@media(max-width:700px){#chat-app .lainaus-esikatselu{margin:6px 8px 0}}
/* Small line icon with a full keyboard/touch target on every message. */
#chat-app .message>.pikavastaus{align-self:flex-start;flex:none;width:44px;height:44px;min-height:44px;min-width:44px;margin:0;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:transparent;color:var(--text);box-shadow:none;opacity:0;transition:opacity .12s}
#chat-app .message:hover>.pikavastaus,#chat-app .message:focus-within>.pikavastaus{opacity:1}
#chat-app .message>.pikavastaus:focus-visible{outline:3px solid var(--focus);outline-offset:1px;opacity:1}
#chat-app .message>.pikavastaus:hover{background:var(--surface)}
@media(hover:none),(max-width:700px){#chat-app .message>.pikavastaus{opacity:1;display:inline-flex}}
.tyotila .kupla.pyyhkaisy{transition:none}
.tyotila .kupla{transition:transform .15s ease-out}
/* Ketjupalkki viestin alla: vastanneiden kuvat, määrä ja uusimman vastauksen esikatselu. */
.tyotila .kupla .ketjupalkki{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;margin:6px 0 0;padding:4px 8px;background:var(--lainaus-tausta);color:var(--kupla-teksti);border:0;border-radius:8px;text-align:left;font-size:13px;cursor:pointer}
.tyotila .kupla .ketjupalkki:hover{background:color-mix(in srgb,var(--primary) 14%,transparent)}
.tyotila .ketju-kuvat{display:flex;flex:none}
.tyotila .ketju-kuvat .avatar{width:22px;height:22px;min-width:22px;font-size:10px;border:2px solid var(--kupla-muu);margin-left:-6px}
.tyotila .ketju-kuvat .avatar:first-child{margin-left:0}
.tyotila .ketju-teksti{display:flex;flex-direction:column;min-width:0}
.tyotila .ketju-teksti strong{color:var(--tt-linkki);font-size:13px}
:root.tyotila[data-theme-mode="dark"] .ketju-teksti strong{color:color-mix(in srgb,var(--primary) 40%,white)}
.tyotila .ketju-esikatselu{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--kupla-aika);font-size:12px}
#chat-app .message.oma .kupla .ketjupalkki{background:var(--lainaus-oma-tausta);color:var(--kupla-oma-teksti)}
#chat-app .message.oma .kupla .ketjupalkki:hover{background:color-mix(in srgb,var(--kupla-oma-teksti) 10%,var(--lainaus-oma-tausta))}
#chat-app .message.oma .ketju-teksti strong{color:var(--kupla-oma-teksti)}
#chat-app .message.oma .ketju-esikatselu{color:var(--kupla-oma-aika)}
#chat-app .message.oma .ketju-kuvat .avatar{border-color:var(--kupla-oma)}
/* Ketju: työpöydällä sivupaneeli, puhelimessa alhaalta nouseva paneeli; pääkeskustelu jää taakse ja
   aloitusviesti pysyy paneelin yläosassa. */
.tyotila #close-thread{position:sticky;top:0;z-index:3}
.tyotila #thread-parent{position:sticky;top:48px;z-index:2;background:var(--chat-tausta);padding-bottom:6px;border-bottom:1px solid var(--line);max-height:34dvh;overflow:auto}
.tyotila .ketju-tausta{display:none}
@media(max-width:700px){
 #chat-app[data-view=thread] .chat-shell>main{display:flex;flex-direction:column;height:100dvh;min-height:0}
 #chat-app[data-view=thread] .conversation-layout{flex:1;min-height:0}
 #chat-app[data-view=thread] .conversation{display:flex;min-height:0}
 #chat-app[data-view=thread] #messages{flex:1;min-height:0;overflow-y:auto}
 #chat-app[data-view=thread] .ketju-tausta{display:block;position:fixed;inset:0;z-index:19;background:var(--ketju-tausta-himmennys);border:0;border-radius:0;min-height:0;padding:0}
 #chat-app .thread:not([hidden]){position:fixed;left:0;right:0;bottom:0;top:8dvh;z-index:20;width:auto;min-width:0;max-width:none;border:0;border-radius:16px 16px 0 0;box-shadow:var(--alapaneeli-varjo);padding:0 12px calc(12px + env(safe-area-inset-bottom));overflow-y:auto;animation:tt-paneeli .22s ease-out}
 #chat-app .thread:not([hidden])::before{content:'';display:block;width:40px;height:4px;border-radius:2px;background:var(--line);margin:8px auto 0}
 .tyotila #close-thread{top:0;background:var(--chat-tausta);width:100%;text-align:left}
}
@keyframes tt-paneeli{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.tyotila .thread,.tyotila .kupla,.tyotila .message.korostus>.kupla{animation:none;transition:none}}
/* Ryhmävärit ja kaikki teemavärit tulevat /tyotila/theme.css:stä (ei suoria värejä tässä tiedostossa). */
/* Keskustelulistan ryhmäotsikot (Tommi 29.10.2026, Villen ohje): otsikot erottuvat kanavista kaikissa teemoissa. */
#channel-list{display:flex;flex-direction:column}
.tyotila .tiimilista .kanavaryhma,#chat-app #channel-list .kanavaryhma{margin:14px 0 0;padding:0;border-top:1px solid var(--line)}
.tyotila .tiimilista .kanavaryhma:first-child,#chat-app #channel-list .kanavaryhma:first-child{margin-top:6px;border-top:0}
.tyotila .tiimilista .ryhma-otsikko,#chat-app #channel-list .ryhma-otsikko{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;padding:8px 10px 8px 6px;background:var(--ryhma-nauha);border-radius:var(--sade-pieni,8px);font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text);line-height:1.2}
.tyotila .tiimilista .kanavaryhma:first-child>.ryhma-otsikko,#chat-app #channel-list .kanavaryhma:first-child>.ryhma-otsikko{margin-top:0}
.tyotila .tiimilista .kanavaryhma>.ryhma-otsikko,#chat-app #channel-list .kanavaryhma>.ryhma-otsikko{margin-top:6px}
.tyotila .tiimilista .ryhma-nimi,#chat-app #channel-list .ryhma-nimi{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tyotila .tiimilista .ryhma-merkki,#chat-app #channel-list .ryhma-merkki{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--ryhma-vari-0);color:var(--ryhma-merkki-teksti);font-size:12px;font-weight:700;letter-spacing:0;text-transform:none}
#chat-app #channel-list .ryhma-merkki[data-vari="1"]{background:var(--ryhma-vari-1)}
#chat-app #channel-list .ryhma-merkki[data-vari="2"]{background:var(--ryhma-vari-2)}
#chat-app #channel-list .ryhma-merkki[data-vari="3"]{background:var(--ryhma-vari-3)}
#chat-app #channel-list .ryhma-merkki[data-vari="4"]{background:var(--ryhma-vari-4)}
#chat-app #channel-list .ryhma-merkki[data-vari="5"]{background:var(--ryhma-vari-5)}
#chat-app #channel-list .ryhma-merkki[data-vari="dm"]{background:var(--ryhma-vari-dm)}
/* Nuoli oikeaan reunaan: osoittaa oikealle kiinni, alas auki. */
#chat-app #channel-list .kanavaryhma>summary::before{content:none}
#chat-app #channel-list .kanavaryhma>summary::after{content:'';flex:none;order:9;width:7px;height:7px;margin:0 4px 0 2px;border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);transform:rotate(-45deg);transition:transform 160ms var(--liike,ease)}
#chat-app #channel-list .kanavaryhma[open]>summary::after{transform:rotate(45deg)}
/* Lukemattomat näkyvät otsikossa vain kun ryhmä on kiinni; auki ollessa ne näkyvät kanavarivillä. */
#chat-app #channel-list .ryhma-lukematta{flex:none;order:8;letter-spacing:0}
#chat-app #channel-list .kanavaryhma[open] .ryhma-lukematta{display:none}
.tyotila .tiimilista .ryhma-kanavat,#chat-app #channel-list .ryhma-kanavat{display:flex;flex-direction:column;padding:4px 0 2px 14px}
.tyotila .tiimilista .ryhma-kanavat .channel-button,#chat-app #channel-list .ryhma-kanavat .channel-button{min-height:40px;padding:8px 10px}
.tyotila .tiimilista .kanava-risuaita,#chat-app #channel-list .kanava-risuaita{flex:none;width:14px;color:var(--text-2);font-weight:600;text-align:center}
#chat-app #channel-list .yksityiset-lista:empty::after{content:'Ei yksityisviestejä vielä';padding:12px 10px;color:var(--text-2);font-size:13px}
#chat-app #channel-list .kanavaryhma .ryhma-kanavat:empty::after{content:'Ei kanavia vielä';padding:12px 10px;color:var(--text-2);font-size:13px}
#chat-app #channel-list .ryhma-otsikko.yksityiset{margin-top:18px;border-top:0;position:relative}
#chat-app #channel-list .ryhma-otsikko.yksityiset::before{content:'';position:absolute;left:0;right:0;top:-10px;border-top:1px solid var(--line)}
#chat-app #channel-list .yksityiset-lista .channel-button{min-height:48px}
/* Sivupalkin tiimit ja jäsenet: Grok/AI-, Tuki- ja Asetukset-sivujen
   sivupalkki käyttää Keskustelut-listan rivikomponenttia (yllä jaetut säännöt). Tässä vain sivupalkin
   koot: 48 px pilleri, 28 px merkki, SVG-nuoli ja 40 px kanavarivit. Värit vain teeman muuttujista. */
.tyotila .sivupalkki .tiimilista{display:flex;flex-direction:column}
/* Tiimin nimi normaalikirjoituksella: isot kirjaimet vain pienille osio-otsikoille. */
.tyotila .tiimilista .ryhma-otsikko{min-height:48px;padding:10px 16px 10px 10px;border-radius:24px;background:var(--toissa);font-size:16px;font-weight:600;letter-spacing:0;text-transform:none;list-style:none;cursor:pointer;user-select:none}
.tyotila .tiimilista .ryhma-otsikko::marker{content:''}
.tyotila .tiimilista .ryhma-otsikko::-webkit-details-marker{display:none}
/* Tiimimerkit: värit olivat kovakoodattuja (team.id % 6), eivät tiimin tietoja,
   joten sivupalkissa kaikki merkit ovat navy-pohjalla ja valkoisella kirjaimella. */
.tyotila .tiimilista .ryhma-merkki{width:28px;height:28px;border-radius:8px;font-size:13px;background:var(--tiimimerkki-pohja);color:var(--tiimimerkki-teksti)}
.tyotila .tiimilista .ryhma-nuoli{flex:none;width:16px;height:16px;color:var(--text-2);transition:transform 220ms cubic-bezier(.23,1,.32,1)}
.tyotila .tiimilista .kanavaryhma[open]>.ryhma-otsikko .ryhma-nuoli{transform:rotate(90deg)}
.tyotila .tiimilista .ryhma-kanavat{padding:4px 0 2px 16px}
.tyotila .tiimilista .ryhma-kanavat .channel-button{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:8px 12px;border-radius:20px;background:transparent;color:var(--text);font-weight:500;overflow-wrap:anywhere}
.tyotila .tiimilista .ryhma-kanavat .channel-button:hover{background:var(--toissa)}
.tyotila .tiimilista .ryhma-kanavat .channel-button[aria-current]{background:var(--kanban-valittu-pohja);color:var(--kanban-valittu-teksti);font-weight:700}
.tyotila .tiimilista .channel-button[aria-current] .kanava-risuaita{color:inherit}
.tyotila .tiimilista :is(.ryhma-otsikko,.channel-button):focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.tyotila .sivupalkki .jasenet-otsikko{margin:26px 0 8px;font-size:12px;letter-spacing:.12em}
.tyotila .sivupalkki .person{gap:12px;padding:6px 0;font-size:15px}
.tyotila .sivupalkki .person .avatar{width:36px;height:36px;font-size:13px}
.tyotila .sivupalkki .person-tiedot{min-width:0}
.tyotila .sivupalkki .person-nimi{display:block;font-size:15px;font-weight:600;line-height:1.25;color:var(--text);overflow-wrap:anywhere}
.tyotila .sivupalkki .person small{font-size:12px;line-height:1.3;margin-top:2px;color:var(--text-2)}
/* Grok/AI- ja Tuki-sivun paneeli: HallaLinkin style.css:n .content-marginaalit
   (56 px ylhäällä, 256 px vasemmalla) siirsivät paneelin keskelle. Vasempaan yläkulmaan 24 px:n reunuksin,
   enintään 640 px. Teksti var(--text) 16 px; text-size-adjust estää mobiiliselaimen tekstin suurennoksen. */
.tyotila .shell>main>.content.paneelisivu{margin:0;padding:24px;max-width:none}
.tyotila .paneelisivu .panel{max-width:640px;margin:0 0 20px}
.tyotila .paneelisivu .panel :is(h2,p){color:var(--text)}
.tyotila .paneelisivu .panel p{font-size:16px;line-height:1.6;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){.tyotila .tiimilista .ryhma-nuoli{transition:none}}
@media(max-width:700px){.tyotila .sivupalkki .tiimilista .kanavaryhma{display:block;width:auto;font-size:inherit}.tyotila .shell>main>.content.paneelisivu{padding:16px}}
@media(max-width:700px){
  #chat-app .chat-shell>.sidebar,#chat-app>.sidebar,#chat-app .sidebar{padding-bottom:calc(32px + env(safe-area-inset-bottom,0px));scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  #chat-app .sidebar>details:last-of-type{margin-bottom:12px}
}
/* Kalenterin ruudukko (Tommi 29.10.2026): päivänäkymän koko tapahtuma-alue oli tasaisen vaaleansininen,
   koska tämän päivän sävy täytti ainoan sarakkeen. Neutraali pinta, ohuet tuntiviivat, vaaleammat puolen
   tunnin viivat, tämä päivä vain hyvin hennosti (päivänäkymässä vain otsikossa) ja selvä punainen nyt-viiva.
   Värit teeman muuttujista (theme.css), ei suoria värejä tässä tiedostossa. */
#kalenteri-app{--kal-tanaan:var(--kal-tanaan-pohja);--kal-viikonloppu:var(--kal-viikonloppu-pohja);--kal-puolitunti:var(--kal-puoliviiva)}
#kalenteri-app .kal-ruudukko,#kalenteri-app .kal-paaotsikot,#kalenteri-app .kal-kokopaiva,#kalenteri-app .kal-vieritys{background-color:var(--kal-pinta)}
#kalenteri-app .kal-ruudukko{border-color:var(--kal-tuntiviiva)}
#kalenteri-app .kal-paaotsikot{border-bottom-color:var(--kal-tuntiviiva)}
#kalenteri-app .kal-kokopaiva{border-bottom:1px solid var(--kal-tuntiviiva)}
#kalenteri-app .kal-kokopaiva-solu,#kalenteri-app .kal-paaotsikko{border-left-color:var(--kal-tuntiviiva)}
#kalenteri-app .kal-tunti{border-top-color:var(--kal-tuntiviiva)}
#kalenteri-app .kal-tunti:first-child{border-top-color:transparent}
#kalenteri-app .kal-sarake{background-color:var(--kal-pinta);border-left-color:var(--kal-tuntiviiva);background-image:linear-gradient(to bottom,var(--kal-tuntiviiva) 1px,transparent 1px),linear-gradient(to bottom,var(--kal-puoliviiva) 1px,transparent 1px)}
#kalenteri-app .kal-sarake.kal-viikonloppu,#kalenteri-app .kal-kokopaiva-solu.kal-viikonloppu{background-color:var(--kal-viikonloppu-pohja)}
#kalenteri-app .kal-sarake.kal-tama-paiva,#kalenteri-app .kal-kokopaiva-solu.kal-tama-paiva{background-color:var(--kal-tanaan-pohja)}
#kalenteri-app[data-nakyma=paiva] .kal-sarake.kal-tama-paiva,#kalenteri-app[data-nakyma=paiva] .kal-kokopaiva-solu.kal-tama-paiva{background-color:var(--kal-pinta)}
#kalenteri-app .kal-paaotsikko.kal-tama-paiva{background:var(--kal-tanaan-otsikko);color:var(--tt-linkki)}
#kalenteri-app .kal-nyt{background:var(--kal-nyt);height:2px}
#kalenteri-app .kal-nyt::before{background:var(--kal-nyt)}
#kalenteri-app button.kal-tapahtuma{background:var(--kal-tapahtuma-pohja);color:var(--kal-tapahtuma-teksti)}
#kalenteri-app button.kal-tapahtuma.kal-varattu{background:repeating-linear-gradient(135deg,var(--toissa) 0 6px,var(--kal-pinta) 6px 12px);color:var(--text)}
/* iOS: näkymävalitsin ei saa jäädä tilapalkin alle (koti-valikon sovellus). */
@media(max-width:700px){#kalenteri-app{padding-top:max(12px,calc(env(safe-area-inset-top,0px) + 8px))}}

/* Compact channel controls share one 44px row on every chat viewport. */
#chat-app .chat-shell .viewhead{display:grid;grid-template-columns:minmax(0,1fr) 44px 44px;align-items:center;height:44px;min-height:44px;flex-shrink:0;padding:0 12px;gap:0;position:relative;border:0;background:var(--surface)}
#chat-app .chat-shell .viewhead h1{margin:0;font-size:16px;font-weight:600;line-height:1.25;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chat-app .chat-shell .kanavan-toiminnot{margin:0;position:relative;grid-column:3}
#chat-app .chat-shell .kanava-ikoninappi,#chat-app .chat-shell #back-list{align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:0;margin:0;border:0;background:transparent;color:var(--text);border-radius:var(--sade-pieni);box-shadow:none}
#chat-app .chat-shell .kanava-ikoninappi{display:flex;list-style:none}
#chat-app .kanava-ikoninappi::-webkit-details-marker{display:none}
#chat-app .kanava-ikoninappi svg{width:20px;height:20px}
#chat-app .kanava-ikoninappi:hover{background:var(--toissa)}
#chat-app .kanavan-toiminnot[open] #channel-actions{position:absolute;right:0;top:100%;z-index:7;min-width:220px;max-width:calc(100vw - 24px);padding:12px;background:var(--surface);color:var(--text);border:1px solid var(--line);display:flex;flex-direction:column;align-items:stretch;gap:6px}
#chat-app .kanava-ikoninappi:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
@media(max-width:700px){
 #chat-app .chat-shell .viewhead{grid-template-columns:44px minmax(0,1fr) 44px 44px;padding:0 8px}
 #chat-app .chat-shell #back-list{display:flex}
 #chat-app .chat-shell .kanavan-toiminnot{grid-column:4}
}
.tyotila .message.ai-message>.kupla{--kupla-muu:var(--kupla-ai);--kupla-nimi:var(--kupla-ai-nimi);--kupla-aika:var(--kupla-ai-meta);--kupla-oma-aika:var(--kupla-ai-meta);background:var(--kupla-ai);color:var(--kupla-ai-teksti);border-left:4px solid var(--kupla-ai-raita)}
.tyotila .message.ai-message>.kupla :is(.body strong,.badge,.body a,.attachment,.ketju-teksti strong){color:var(--kupla-ai-teksti)}
.tyotila .message.ai-message>.kupla>strong{color:var(--kupla-ai-nimi)}
.tyotila .message.ai-message>.kupla :is(time,small){color:var(--kupla-ai-meta)}
.tyotila .message.ai-message .badge,.tyotila .message.ai-message .lainaus,.tyotila .message.ai-message code{background:var(--kupla-ai);color:var(--kupla-ai-teksti)}
#chat-app .composer>textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* Attachment, message and send stay in reading/keyboard order on one row. */
#chat-app .composer{grid-template-columns:44px minmax(0,1fr) auto}
#chat-app .composer>textarea{grid-column:2;grid-row:1;min-width:0}
#chat-app .composer>button[type=submit]{grid-column:3;grid-row:1}
#chat-app .composer>.liite-nappi{grid-column:1;grid-row:1;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:var(--sade-pieni);background:transparent;color:var(--text);box-shadow:none}
#chat-app .liite-nappi svg{width:22px;height:22px;flex-shrink:0}
#chat-app .liite-nappi:hover{background:var(--toissa)}
#chat-app .liite-nappi:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* Forum replies stay under their root in the conversation, at every width. */
.tyotila .message-branch{min-width:0}
#chat-app .kupla .ketjupalkki{min-height:44px;min-width:44px}
#chat-app .inline-thread{margin:8px 0 16px 40px;padding:0 0 0 16px;border-left:2px solid var(--line);min-width:0}
#chat-app .inline-thread[hidden]{display:none}
#chat-app .inline-thread .message>.kupla{max-width:calc(100% - 88px);overflow-wrap:anywhere}
#chat-app .inline-thread .message.ai-message>.kupla>strong{display:block}
#chat-app .inline-thread .composer{margin:12px 0 0;max-width:100%;min-width:0}
#chat-app .inline-thread .inline-older{min-height:44px}
#chat-app .inline-thread .composer>textarea{height:44px;min-height:44px}
#chat-app .ketjupalkki:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media(max-width:700px){
 #chat-app .inline-thread{margin-left:12px;padding-left:10px}
 #chat-app .inline-thread .message>.kupla{max-width:calc(100% - 48px);padding-right:12px}
 #chat-app .inline-thread .composer{padding:4px;gap:4px}
 #chat-app .inline-thread .composer>button[type=submit]{padding:0 8px}
}

/* Compact forum controls; the reply field only appears after Vastaa. */
#chat-app .kupla .ketjupalkki{width:auto;max-width:100%;padding:0 4px;margin-top:2px;gap:0;background:transparent;font-size:12px;font-weight:500}
#chat-app .message.oma .kupla .ketjupalkki{background:transparent}
#chat-app .inline-composer[hidden]{display:none}
#chat-app .inline-thread .inline-composer{margin:6px 0;box-shadow:none}
#chat-app .inline-thread .message>.kupla{max-width:calc(100% - 88px)}
#chat-app .inline-thread .message.ai-message>.kupla{padding-top:8px;padding-bottom:6px}
#chat-app .ai-job-status{display:block;font-size:12px;line-height:1.5;margin-top:4px;color:var(--kupla-aika)}
#chat-app .message.oma .ai-job-status{color:var(--kupla-oma-aika)}
@media(max-width:700px){#chat-app .inline-thread .message{gap:4px}#chat-app .inline-thread .message>.kupla{max-width:calc(100% - 76px)}}

/* Message input owns the available width; controls keep 44px touch targets. */
#chat-app .composer{grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;align-items:end;flex-shrink:0;padding:8px;margin:8px 16px 12px}
#chat-app .composer>textarea{box-sizing:border-box;grid-column:2;grid-row:1;width:100%;min-width:0;height:48px;min-height:48px;max-height:144px;padding:12px 14px;font-size:16px;line-height:24px;resize:none;overflow-y:hidden;scroll-padding-block:12px}
#chat-app .composer>textarea::placeholder{color:var(--text-2);opacity:1}
#chat-app .composer>.send-nappi,#chat-app .composer>.liite-nappi{display:inline-flex;align-items:center;justify-content:center;align-self:end;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:var(--sade-pieni);box-shadow:none}
#chat-app .composer>.send-nappi{grid-column:3;grid-row:1;background:var(--toiminto-tausta);color:var(--toiminto-teksti)}
#chat-app .composer>.send-nappi:disabled{background:var(--toissa);color:var(--text-2);opacity:.55;cursor:default}
#chat-app .send-nappi svg{width:22px;height:22px;flex-shrink:0}
#chat-app .send-nappi:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
#chat-app .conversation>#messages{padding-bottom:16px;scroll-padding-block:16px}
#chat-app .inline-thread .composer{padding:8px;gap:8px}
#chat-app .inline-thread .composer>textarea{height:48px;min-height:48px}
#chat-app .conversation{padding-bottom:env(safe-area-inset-bottom,0px)}
@media(max-width:700px){
 #chat-app .composer{margin-left:8px;margin-right:8px}
 #chat-app .inline-thread .composer{margin-left:0;margin-right:0}
 #chat-app.chat-visual-viewport[data-view=conversation] .chat-shell,
 #chat-app.chat-visual-viewport[data-view=thread] .chat-shell{position:fixed;inset:var(--chat-visible-top,0px) 0 auto;height:var(--chat-visible-height,100dvh);width:100%;padding-bottom:0}
 #chat-app.chat-visual-viewport[data-view=conversation] .chat-shell>main,
 #chat-app.chat-visual-viewport[data-view=thread] .chat-shell>main{height:100%;min-height:0}
}

/* Display label for a human's /ai request; identical across all themes. */
.ai-command-badge{display:inline-block;background:var(--ai-command-bg);color:var(--ai-command-text);font-size:.8125rem;font-weight:800;line-height:1.4;padding:2px 7px;border-radius:5px;vertical-align:baseline;margin-inline-end:4px}

/* Native work meetings: existing käyttäjä tokens, 40px fields and compact dialog. */
#kal-new-meeting{flex-shrink:0}
#kalenteri-app .kal-nakyma{overflow-x:auto;max-width:100%}
#kalenteri-app .kal-side-by-side .kal-paaotsikko{white-space:normal;min-height:48px;line-height:1.35}
#kalenteri-app .kal-cancelled{text-decoration:line-through;border-left-style:dashed;opacity:.75}
#kal-pop-actions{margin-top:14px;flex-wrap:wrap}
#kal-pop-actions a{display:inline-flex;align-items:center;min-height:40px;padding:6px 12px;border-radius:var(--sade-nappi);background:var(--navy);color:var(--white);font-weight:600;text-decoration:none}
#kal-meeting-dialog{width:740px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box}
#kal-meeting-form{display:flex;flex-direction:column;gap:8px;min-width:0}
#kal-meeting-form label{font-size:14px;font-weight:600}
#kal-meeting-form input:not([type=checkbox]),#kal-meeting-form select,#kal-meeting-form textarea{box-sizing:border-box;width:100%;min-width:0;font-size:16px;min-height:40px;margin:0}
.kal-form-times{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.kal-form-times>div{min-width:0}
.kal-attendee-picker{padding:8px 12px;border:1px solid var(--line);border-radius:var(--sade-pieni);margin:0}
#kal-meeting-people{display:flex;flex-wrap:wrap;gap:4px 16px;max-height:120px;overflow:auto;margin-top:6px}
#kal-meeting-form .kal-person{display:flex;align-items:center;gap:8px;min-height:40px}
#kal-meeting-form .kal-person[hidden]{display:none}
#kal-availability{padding:10px 12px;background:var(--toissa);border:1px solid var(--line);border-radius:var(--sade-pieni);font-size:13px}
.kal-availability-list{padding-left:18px;margin:6px 0}
.kal-availability-list li{margin:5px 0}
.kal-availability-list small{display:block;font-size:12px;overflow-wrap:anywhere}
#kal-availability button{min-height:40px;white-space:normal;text-align:left;font-size:13px}
#kal-meeting-form .kal-more{padding:8px 0}
#kal-meeting-form .kal-more[open]{display:flex;flex-direction:column;gap:6px}
#kal-meeting-form .kal-work-notice{font-size:12px;margin:0}
#kal-meeting-error:empty{display:none}
.kal-invite-panel{border:1px solid var(--line);border-radius:var(--sade-kortti);padding:12px;background:var(--surface);margin:0 0 12px;max-width:100%;box-sizing:border-box}
.kal-invite-panel>summary{font-weight:700;cursor:pointer;min-height:32px}
.kal-invite-card{border-top:1px solid var(--line);padding:12px 0;display:flex;flex-direction:column;gap:6px;overflow-wrap:anywhere}
.kal-invite-card p{margin:0;font-size:13px}
.kal-invite-card .toolbar{flex-wrap:wrap}
.kal-invite-card a{min-height:40px;display:inline-flex;align-items:center}
@media(max-width:700px){#kal-meeting-dialog{padding:14px}#kalenteri-app .kal-tyokalut{flex-wrap:wrap}#kal-new-meeting{order:-1}.kal-form-times{grid-template-columns:minmax(0,1fr) 96px;gap:8px}#kal-meeting-form input[type=datetime-local]{max-width:100%;padding:6px 4px}.kal-invite-panel{margin:8px}.kal-invite-card .toolbar button{min-height:44px}}
#kal-meeting-form>footer{position:sticky;bottom:-20px;z-index:2;background:var(--surface);padding:10px 0;margin:0;flex-shrink:0}
@media(max-width:700px){#kal-meeting-form>footer{bottom:-14px}#kal-meeting-form>footer button{min-height:44px}.kal-availability-list{max-height:130px;overflow:auto}#kal-popover{max-height:calc(100dvh - 100px);overflow-y:auto}}

/* Uusi HallaBit-ilme 1.11.2026: yhteiset komponentit ja sovelluskehys. */
.tyotila{--rail-width:240px;--navy:var(--secondary);--navy-2:var(--secondary-hover)}
.tyotila :is(button,input,select,textarea){font-family:inherit}
.tyotila :is(button,input:not([type=hidden]),select,textarea,summary,[role=button]){min-width:44px;min-height:44px}
.tyotila :is(button,input:not([type=checkbox]):not([type=radio]),select,textarea){border-radius:var(--sade-nappi)}
.tyotila button{background:var(--primary);color:var(--primary-ink);border-color:var(--primary);font-weight:700}
.tyotila button:hover:not(:disabled){background:var(--primary-hover);border-color:var(--primary-hover)}
.tyotila button.secondary,.tyotila :is(.shell:not(.chat-shell)>main,main.content) button.secondary:not(.icon-button):not(.result),#chat-app .sidebar>.toolbar button.secondary,#kanban-app .viewhead .toolbar button.secondary,.tyotila .member-row button.secondary{background:var(--surface);color:var(--text);border:1px solid var(--line)}
.tyotila button.secondary:hover:not(:disabled){background:var(--panel);border-color:var(--line)}
.tyotila :is(button.ghost,button.icon-button){background:transparent;color:var(--text);border-color:transparent}
.tyotila :is(button.ghost,button.icon-button):hover:not(:disabled){background:var(--toissa);border-color:transparent}
.tyotila button:disabled{cursor:not-allowed}
.tyotila a{color:var(--tt-linkki)}
.tyotila :is(.shell:not(.chat-shell)>main,main.content,main.login-card) a:not([class]){color:var(--tt-linkki)}
.tyotila :is(input,textarea)::placeholder{color:var(--text-2);opacity:1}
.tyotila :is(.panel,.login-card,.menu,dialog,.action-proposal,.kal-invite-panel){border-radius:var(--sade-kortti);box-shadow:var(--varjo-kortti)}
.tyotila :is(.badge,.notice,.channel,.result){border-radius:var(--sade-pieni)}
.tyotila :is(button,input,select,textarea,summary,a):focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.tyotila .topbar{background:var(--surface);color:var(--text);border-bottom:1px solid var(--line)}
.tyotila .topbar :is(.brand,.hallalink-paluu,.account summary){color:var(--text)}
.tyotila .topbar .search{margin:0 auto 0 0}
.tyotila .topbar .hallalink-paluu{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.tyotila .rail{background:var(--tt-nav);color:var(--tt-nav-teksti)}
.tyotila .rail-brand{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;min-height:86px;padding:12px;margin-bottom:12px}
.tyotila .rail-brand img{width:140px;height:auto;max-height:44px}
.tyotila .rail-brand strong{color:var(--tt-nav-teksti);font-size:16px;font-weight:700}
.tyotila .rail a{min-width:44px;min-height:44px;color:var(--tt-nav-teksti);font-size:14px;font-weight:600;border-radius:var(--sade-nappi)}
.tyotila .rail a:hover{background:var(--tt-nav-hover);color:var(--tt-nav-teksti)}
.tyotila .rail a[aria-current]{background:var(--tt-nav-valittu);color:var(--tt-nav-valittu-teksti)}
.tyotila .rail a:focus-visible{outline-color:var(--tt-nav-valittu);outline-offset:2px}
.tyotila .rail a[aria-current]:focus-visible{outline-color:var(--tt-nav-teksti)}
.tyotila .rail svg{width:22px;height:22px;flex-shrink:0}
.tyotila .nav-label-mobile{display:none}
@media(min-width:701px){
 .tyotila .topbar:has(~.shell),.tyotila :is(#chat-app,#kanban-app)>.topbar{margin-left:var(--rail-width)}
 .tyotila .topbar:has(~.shell)>.brand,.tyotila :is(#chat-app,#kanban-app)>.topbar>.brand{display:none}
 .tyotila .shell{margin-left:var(--rail-width);grid-template-columns:260px minmax(0,1fr)}
 .tyotila .settings-shell{grid-template-columns:minmax(0,1fr)}
 .tyotila .rail{position:fixed;inset:0 auto 0 0;width:var(--rail-width);height:100dvh;display:flex;flex-direction:column;gap:4px;padding:12px;z-index:6;overflow-y:auto}
 .tyotila .rail a{flex-direction:row;justify-content:flex-start;gap:12px;padding:10px 12px;flex-shrink:0}
}
@media(min-width:701px) and (max-width:1100px){
 .tyotila{--rail-width:200px}
 .tyotila .shell{grid-template-columns:220px minmax(0,1fr)}
 .tyotila .settings-shell{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
 .tyotila .topbar .brand strong{display:block}
 .tyotila .shell,.tyotila .settings-shell,#kanban-app .shell{margin-left:0;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
 .tyotila .rail,.settings-shell .rail,#kanban-app .rail{position:fixed;inset:auto 12px 12px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;width:auto;height:auto;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));border:1px solid var(--line);border-radius:var(--sade-kortti);background:var(--surface);box-shadow:var(--varjo-nosto);z-index:6}
 .tyotila .rail-brand,.tyotila .rail .nav-label{display:none}
 .tyotila .rail .nav-label-mobile{display:block}
 .tyotila .rail a,.settings-shell .rail a,#kanban-app .rail a{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:44px;min-height:58px;height:58px;padding:4px 0;font-size:10px;line-height:1.2;letter-spacing:0;white-space:nowrap;color:var(--text);border-radius:var(--sade-nappi)}
 .tyotila .rail a:hover{background:var(--toissa);color:var(--text)}
 .tyotila .rail a[aria-current]{background:var(--primary);color:var(--primary-ink)}
 .tyotila .rail a:focus-visible{outline-color:var(--focus);outline-offset:-3px}
 #chat-app .chat-shell .rail{height:auto}
 #chat-app[data-view=conversation] .rail,#chat-app[data-view=thread] .rail{display:none}
 #chat-app[data-view=conversation] .chat-shell,#chat-app[data-view=thread] .chat-shell{padding-bottom:0}
}
/* Komponenttien kosketusalueet, myös kuvakepainikkeet ja tiiviit kalenterivalinnat. */
.tyotila :is(.toolbar,.composer,.viewhead,.panel,.login-card,.meeting-controls) :is(button,summary,select){min-width:44px;min-height:44px}
#chat-app .composer>.send-nappi{background:var(--primary);color:var(--primary-ink);border-radius:var(--sade-nappi)}
#chat-app .composer>.send-nappi:hover:not(:disabled){background:var(--primary-hover)}
#chat-app :is(.liite-nappi,.kanava-ikoninappi,.pikavastaus,#back-list){border-radius:var(--sade-nappi)}
#chat-app .reaction{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px}
#chat-app .reaction svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tyotila :is(.kal-mini-paiva,.kal-navi button,.kal-invite-panel>summary){min-width:44px;min-height:44px}
@media(prefers-reduced-motion:reduce){.tyotila *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Yhteinen 44 px vähimmäiskoko ohittaa vanhat tiiviit kuvakekohtaiset mitat. */
.tyotila :is(button,input:not([type=hidden]),select,textarea,summary,[role=button]){min-width:44px!important;min-height:44px!important}
/* WebKitin natiivi valintalista ei noudata pelkkää min-height-arvoa. */
.tyotila select{height:44px!important}
#list-status:empty{display:none}
.tyotila a:not(.skip):not(.sr-only){min-width:44px;min-height:44px}
.tyotila :is(.panel,.login-card,.menu,.meeting-page) a{display:inline-flex;align-items:center}
.tyotila :is(input[type=checkbox],input[type=radio]){flex-shrink:0}
.tyotila :is(.kal-mini-paiva.kal-tama-paiva,.kal-kk-paiva.kal-tama-paiva .kal-kk-numero){color:var(--primary-ink)}
.tyotila .kal-mini-ruudut{gap:0}
@media(min-width:701px){.tyotila .shell:has(>.kal-sivu){grid-template-columns:340px minmax(0,1fr)}}
/* Nykyinen vaalea logotiedosto säilyy luettavana myös vaaleassa mobiiliotsakkeessa. */
.tyotila .topbar .brand{background:var(--tt-nav);color:var(--tt-nav-teksti);padding:6px 10px;border-radius:var(--sade-nappi)}
.tyotila .topbar:not(:has(.brand)){background:var(--tt-nav);color:var(--tt-nav-teksti)}
.tyotila .kanban-tuonti a.button{background:var(--primary);color:var(--primary-ink)}
.tyotila dialog button.tekstilinkki{color:var(--tt-linkki);border-radius:var(--sade-nappi)}
.tyotila dialog .dialogi-alaosa button,.tyotila .meeting-controls button{border-radius:var(--sade-nappi)}
.tyotila :is(.kal-invite-panel,.action-proposal){border-radius:var(--sade-kortti)}
.tyotila :is(.kuvakatselu-x,.avatar){border-radius:50%}

/* Listarivit ovat valintoja, ja perivät yhteisten pintojen värit. */
.tyotila .channel-button{background:transparent;color:var(--text);border-color:transparent}
.tyotila .channel-button:hover:not(:disabled){background:var(--toissa);border-color:transparent}
.tyotila .channel-button:is(.active,[aria-current]){background:var(--toissa);color:var(--text)}
.tyotila :is(button:not(.kuvakatselu-x),input:not([type=checkbox]):not([type=radio]),select,textarea){border-radius:var(--sade-nappi)!important}
.tyotila .kal-kytkin input{appearance:auto;width:44px;height:44px;accent-color:var(--primary)}
.tyotila .kal-kytkin input::after{display:none}
@media(max-width:700px){
 .tyotila .topbar .brand strong{display:none}
 .tyotila .topbar{gap:8px;min-height:122px}
 .tyotila .rail a{height:58px}
}
/* Kapealla työpöydällä leveä sisältö vierii oman alueensa sisällä. */
@media(min-width:701px){.tyotila .shell:not(.chat-shell)>main{min-width:0;overflow-x:auto}}
/* Yhteinen kenttäpinta varmistaa placeholder-kontrastin myös tummassa tilassa. */
:root.tyotila :is(input:not([type=checkbox]):not([type=radio]),select,textarea){background:var(--surface)!important;color:var(--text)}
.tyotila a:not(.skip):not(.sr-only){display:inline-flex;align-items:center;min-width:44px!important;min-height:44px!important}
#kalenteri-app #kal-haku{min-height:44px!important;border-radius:var(--sade-kentta)!important}
.tyotila .kal-mini-paiva.kal-muu-kk{opacity:1}
/* Tumman keskustelun aiempi kuplamuoto säilyy, pinnat tulevat uusista tokeneista. */
:root.tyotila[data-theme-mode="dark"] #chat-app .message.oma:not(.ai-message)>.kupla{border-radius:20px}
:root.tyotila[data-theme-mode="dark"] #chat-app .message.oma:not(.ai-message)>.kupla::before{display:none}
:root.tyotila[data-theme-mode="dark"] #chat-app .message.oma:not(.ai-message) .kupla-ala{background:var(--kupla-muu);border-radius:var(--sade-pieni);padding:2px 6px;width:fit-content;margin-left:auto}
:root.tyotila dialog{border-radius:var(--sade-dialogi)!important}
.tyotila :is(a.button,.settings-tabs a){border-radius:var(--sade-nappi)}
/* HallaBit Keskustelut 2.11.2026: paikallinen sisältö, yhteiset Vaalea/Tumma-tokenit. */
#chat-app .chat-shell{grid-template-columns:280px minmax(0,1fr);background:var(--bg)}
#chat-app .chat-shell>.sidebar{background:var(--surface);padding:24px 12px;border-right:1px solid var(--line)}
#chat-app .sidebar>h2{font-size:22px;letter-spacing:-.03em;margin:0 8px 18px}
#chat-app .sidebar>.toolbar{display:grid;grid-template-columns:1fr;gap:8px;margin:0 4px 20px}
#chat-app .sidebar>.toolbar button{font-size:13px;font-weight:700;border-radius:var(--sade-nappi)}
#chat-app .sidebar>#connection{font-size:12px;color:var(--text-2);padding:8px;margin:16px 0 0}
#chat-app .sidebar>details{margin:12px 8px;color:var(--text-2)}
#chat-app #channel-list .kanavaryhma{border:0;margin:4px 0 12px}
#chat-app #channel-list .ryhma-otsikko{background:transparent;color:var(--text-2);font-size:12px;font-weight:700;text-transform:none;letter-spacing:0;padding:8px;min-height:44px;border-radius:var(--sade-pieni)}
#chat-app #channel-list .ryhma-merkki{border-radius:50%;width:26px;height:26px;font-size:12px}
#chat-app #channel-list .ryhma-kanavat{padding:4px 0;gap:4px}
#chat-app #channel-list .channel-button{display:flex;align-items:center;gap:10px;min-width:44px;min-height:52px;padding:8px 10px;background:transparent;color:var(--text);border:1px solid transparent;border-radius:var(--sade-pieni);font-size:14px;line-height:1.4}
#chat-app #channel-list .channel-button:hover{background:var(--tt-pinta2)}
#chat-app #channel-list .channel-button.active{background:var(--tt-toissa);border-color:var(--line);font-weight:700}
#chat-app #channel-list .kanava-risuaita{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--tt-pinta2);color:var(--text-2);font-size:20px}
#chat-app #channel-list .kanavan-nimi{flex:1;min-width:0;text-align:left}
#chat-app #channel-list .badge{display:inline-grid;place-items:center;min-width:24px;min-height:24px;margin:0;padding:2px 7px;border-radius:999px;background:var(--primary);color:var(--primary-ink);font-size:12px;font-weight:800}
#chat-app #channel-list .avatar{width:36px;height:36px;min-width:36px;border-radius:50%}
#chat-app #channel-list .yksityiset-lista:empty::after{content:'Ei yksityisviestejä vielä';padding:12px 10px;color:var(--text-2);font-size:13px}
#chat-app #channel-list .kanavaryhma .ryhma-kanavat:empty::after{content:'Ei kanavia vielä';padding:12px 10px;color:var(--text-2);font-size:13px}
#chat-app #channel-list .ryhma-otsikko.yksityiset{margin-top:12px}
#chat-app .chat-shell>main{margin:16px;overflow:hidden;background:var(--chat-tausta);border:1px solid var(--line);border-radius:var(--sade-kortti);box-shadow:var(--varjo-kortti)}
#chat-app .chat-shell .viewhead{height:auto;min-height:76px;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--surface);gap:8px}
#chat-app .chat-shell .viewhead h1{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:800;letter-spacing:-.02em}
#chat-app .viewhead h1>.avatar{border-radius:50%}
#chat-app .conversation-layout{position:relative}
#chat-app #chat-status:empty{display:none}
#chat-app #chat-status:not(:empty){padding:10px 20px;background:var(--surface)}
#chat-app .conversation>#messages{padding:16px 24px 24px;scroll-padding-block:24px}
/* Kuplat 3.11.2026: sisältö määrää leveyden, toimintopainikkeet jäävät sen ulkopuolelle.
   Sama 78 % / 640 px raja pätee ensipiirrossa, ryhmissä ja ketjupaneelissa. */
#chat-app .message{--viestin-sivutila:98px;position:relative;gap:10px;align-items:flex-start}
#chat-app #messages .message,#chat-app #thread-messages .message{gap:10px}
#chat-app .message.oma{--viestin-sivutila:54px;flex-direction:row;justify-content:flex-end;padding-right:0}
#chat-app .message>.avatar{align-self:flex-start;width:34px;height:34px;min-width:34px;border-radius:50%;margin:0 0 4px}
#chat-app .message:not(.oma)>.avatar~.kupla{margin-left:0}
#chat-app .message>.kupla,#chat-app .message.jatko>.kupla,#chat-app .message.oma:not(.jatko)>.kupla,#chat-app .message.oma.jatko>.kupla{border-radius:var(--sade-pieni);padding:12px 16px;flex:0 1 auto;width:fit-content;min-width:88px;max-width:min(78%,640px,calc(100% - var(--viestin-sivutila)));box-shadow:var(--kupla-varjo);border:1px solid var(--line);font-size:15px;line-height:1.5}
#chat-app .message.oma>.kupla{border-color:var(--kupla-oma);box-shadow:var(--kupla-oma-varjo)}
#chat-app .message:not(.jatko)>.kupla::before{display:none}
#chat-app .message>.kupla>strong{font-size:12px;color:var(--kupla-nimi);margin:0 0 4px}
#chat-app .message>.kupla .body{line-height:1.55}
#chat-app .message>.kupla .body p{margin:0 0 6px}
#chat-app .message>.kupla .body p:last-child{margin-bottom:0}
#chat-app .message.oma>.avatar{display:none}
#chat-app .message.oma>.pikavastaus{order:-1}
#chat-app .message>.pikavastaus{align-self:center;color:var(--text-2);border-radius:var(--sade-nappi)}
#chat-app .message.day-start{margin-top:56px}
#chat-app .day-separator{position:absolute;top:-40px;left:0;right:0;margin:auto;width:fit-content;max-width:100%;padding:6px 14px;border-radius:999px;color:var(--text-2);background:var(--surface);border:1px solid var(--line);font-size:12px;font-weight:700;line-height:18px}
#chat-app .message .kupla-ala{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px;font-size:12px;line-height:1.5}
#chat-app .message.oma .kupla-ala{background:transparent;padding:0}
#chat-app .message>.kupla .toolbar{display:flex;gap:6px;align-items:center;margin-top:6px}
#chat-app .message>.kupla>.toolbar:has(.message-actions):not(:has(.reaction)){margin:0;height:0}
/* Hylätty liite: virhe ja uudelleenlähetys pysyvät kuplan normaalissa virrassa. */
#chat-app .message.odottaa>.kupla{overflow-wrap:anywhere}
#chat-app .message.odottaa>.kupla>.attachment{min-height:44px;padding:6px 10px;margin:6px 0;border-radius:var(--sade-pieni)}
#chat-app .message.odottaa>.kupla>.kupla-ala{margin-left:0;justify-content:flex-start}
#chat-app .message.epaonnistui>.kupla>.toolbar{height:auto;flex-wrap:wrap;margin-top:8px;align-items:stretch}
#chat-app .message.epaonnistui>.kupla>.toolbar>button{min-width:44px;min-height:44px;max-width:100%;white-space:normal;border-radius:var(--sade-nappi)}
#chat-app .message>.kupla .message-actions{position:absolute;left:0;right:0;top:0;height:0;margin:0}
#chat-app .message>.kupla .message-actions>summary{position:absolute;top:-22px;right:-8px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid var(--line);border-radius:var(--sade-nappi);background:var(--surface);color:var(--text);font-size:20px;line-height:1}
#chat-app .message-actions[open]{z-index:8}
#chat-app .message-actions[open]>.toolbar{position:absolute;left:0;right:auto;top:22px;display:flex;flex-direction:column;align-items:stretch;width:210px;height:auto;margin:0;padding:8px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:var(--sade-kortti);box-shadow:var(--varjo-valikko)}
#chat-app .message.oma .message-actions[open]>.toolbar{left:auto;right:0}
#chat-app .message-actions .toolbar button{width:100%;min-height:44px;border-radius:var(--sade-nappi);color:var(--text);background:var(--surface);font-size:13px;text-align:left}
#chat-app .reaction{border:1px solid var(--line);border-radius:var(--sade-pieni);padding:0 10px;background:var(--surface);color:var(--text);font-size:13px;font-weight:700}
#chat-app .reaction[aria-pressed=true]{border:2px solid var(--primary);background:var(--tt-pinta2);color:var(--text)}
#chat-app .reaction:hover{background:var(--tt-toissa)}
#chat-app .kupla .ketjupalkki{min-height:44px;min-width:44px;padding:0 10px;margin-top:8px;border:1px solid currentColor;border-radius:var(--sade-pieni);color:var(--kupla-nimi);font-size:12px;font-weight:700;gap:6px}
#chat-app .message.oma .kupla .ketjupalkki{color:var(--kupla-oma-teksti)}
#chat-app :is(#channel-actions,.mention-picker){border-radius:var(--sade-kortti);box-shadow:var(--varjo-valikko)}
#chat-app .attachment{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px;margin:10px 0 4px;border:1px solid var(--line);border-radius:var(--sade-pieni);background:var(--surface);color:var(--text);text-decoration:none}
#chat-app .attachment svg{width:24px;height:28px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#chat-app .attachment-info{min-width:0;display:flex;flex-direction:column;gap:4px}
#chat-app .attachment-info strong{font-size:13px;overflow-wrap:anywhere;color:var(--text)}
#chat-app .attachment-info small{font-size:12px;color:var(--text-2)}
#chat-app .message .kupla .liitekuva{display:flex;border:1px solid var(--line);border-radius:var(--sade-pieni);overflow:hidden;background:var(--surface)}
#chat-app .kupla>:is(.body,.toolbar,.liitekuvat,.attachment,.meeting-card,.lainaus,.ketjupalkki){min-width:0;max-width:100%}
#chat-app .kupla :is(pre,code){white-space:pre-wrap;overflow-wrap:anywhere}
#chat-app .kupla .liitekuva{min-width:0;max-width:100%}
#chat-app .kupla .ketjupalkki{flex-wrap:wrap}
#chat-app .liitekuva img{display:block;width:200px;height:150px;object-fit:cover;max-width:100%}
#chat-app .message .lainaus{min-width:44px;min-height:44px;border-radius:var(--sade-pieni)}
#chat-app .composer{border:1px solid var(--line);border-radius:var(--sade-kortti);background:var(--surface);box-shadow:var(--varjo-kortti);padding:10px;gap:10px;margin:10px 20px 16px}
#chat-app .composer>textarea{border-radius:var(--sade-kentta);border:1px solid var(--line);height:48px;min-height:48px;padding:11px 14px;background:var(--surface);color:var(--text)}
#chat-app .composer>.send-nappi:disabled{opacity:1;background:var(--primary);color:var(--primary-ink);cursor:default}
#chat-app .composer>.liite-nappi,#chat-app .composer>.send-nappi{border-radius:var(--sade-nappi)}
#chat-app .composer .liite-esikatselu-kohde,#chat-app .lainaus-esikatselu{border-radius:var(--sade-pieni)}
#chat-app #typing-status:empty{display:none}
#chat-app #typing-status:not(:empty){padding:0 24px;margin:8px 0;color:var(--text-2)}
#chat-app .chat-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:240px;height:100%;gap:8px;color:var(--text-2);padding:24px}
#chat-app .chat-empty strong{color:var(--text);font-size:20px}
#chat-app .chat-empty p{margin:0;max-width:280px;font-size:14px}
#chat-app .thread-panel-head,#chat-app .thread-context{display:none}
#chat-app .inline-thread{border-color:var(--line)}
#chat-app .inline-thread.thread-panel:not([hidden]){position:fixed;top:96px;right:32px;bottom:24px;z-index:9;width:380px;max-width:calc(100vw - 32px);margin:0;padding:0;display:flex;flex-direction:column;overflow:hidden;background:var(--chat-tausta);color:var(--text);border:1px solid var(--line);border-radius:var(--sade-kortti);box-shadow:var(--varjo-nosto)}
#chat-app .thread-panel>.thread-panel-head{display:flex;align-items:center;gap:10px;flex:none;padding:12px;border-bottom:1px solid var(--line);background:var(--surface)}
#chat-app .thread-panel-head h2{margin:0;font-size:17px;font-weight:800}
#chat-app .thread-panel-back{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;display:grid;place-items:center;border-radius:var(--sade-nappi)}
#chat-app .thread-panel-back svg,#chat-app #back-list svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#chat-app .thread-panel>.thread-context{display:block;flex:none;max-height:100px;overflow:auto;margin:0;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--text-2);background:var(--surface)}
#chat-app .thread-panel>.inline-replies{flex:1;min-height:0;overflow:auto;padding:8px 12px 16px;scroll-padding-block:24px}
#chat-app .thread-panel>.inline-older{flex:none;align-self:center;margin:8px}
#chat-app .thread-panel .message{--viestin-sivutila:54px}
#chat-app .thread-panel .message>.kupla{padding:10px 12px}
#chat-app .thread-panel .message>.avatar{display:none}
#chat-app .thread-panel .message>.pikavastaus{opacity:1}
#chat-app .thread-panel .composer{position:absolute;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));flex:none;margin:0;padding:8px;gap:6px;z-index:3}
#chat-app .thread-panel:has(.composer:not([hidden]))>.inline-replies{padding-bottom:144px}
#chat-app .thread-panel .message-actions>summary{background:var(--surface)}
@media(min-width:1101px){#chat-app .conversation:has(.thread-panel:not([hidden])){padding-right:400px}}
@media(max-width:1100px) and (min-width:701px){#chat-app .chat-shell{grid-template-columns:240px minmax(0,1fr)}#chat-app .chat-shell>main{margin:12px}#chat-app .inline-thread.thread-panel:not([hidden]){right:24px;top:92px;bottom:24px}}
@media(max-width:700px){
 #chat-app .chat-shell{display:flex;grid-template-columns:none}
 #chat-app .chat-shell>.sidebar{padding:20px 12px calc(32px + env(safe-area-inset-bottom,0px));border:0}
 #chat-app .sidebar>.toolbar{grid-template-columns:1fr 1fr}
 #chat-app .chat-shell>main{margin:0;border:0;border-radius:var(--sade-kortti);box-shadow:none}
 #chat-app .chat-shell .viewhead{min-height:68px;padding:10px 12px;gap:4px}
 #chat-app .chat-shell .viewhead h1{font-size:17px}
 #chat-app .conversation>#messages{padding:10px 12px 20px}
 #chat-app .message{--viestin-sivutila:84px;gap:6px}
 #chat-app #messages .message,#chat-app #thread-messages .message{gap:6px}
 #chat-app .message.oma,#chat-app .thread-panel .message{--viestin-sivutila:50px}
 #chat-app .message>.avatar{width:28px;height:28px;min-width:28px;font-size:11px}
 #chat-app .message>.kupla,#chat-app .message.jatko>.kupla,#chat-app .message.oma:not(.jatko)>.kupla,#chat-app .message.oma.jatko>.kupla{padding:10px 12px}
 #chat-app .message>.kupla .message-actions>summary{width:44px;height:44px;min-height:44px;min-width:44px;background:var(--surface);color:var(--text)}
 #chat-app .composer{margin:8px 8px 10px;padding:8px;gap:6px}
 #chat-app .composer>textarea{font-size:16px;padding:11px 12px}
 #chat-app .conversation{padding-bottom:env(safe-area-inset-bottom,0px)}
 #chat-app .inline-thread.thread-panel:not([hidden]){inset:0;width:100%;max-width:100%;height:var(--chat-visible-height,100dvh);top:var(--chat-visible-top,0px);bottom:auto;border:0;border-radius:var(--sade-kortti);padding-bottom:env(safe-area-inset-bottom,0px);z-index:21;animation:tt-paneeli .18s ease-out}
 #chat-app .thread-panel>.thread-panel-head{padding-top:calc(12px + env(safe-area-inset-top,0px))}
}
@media(prefers-reduced-motion:reduce){#chat-app :is(.message,.kupla,.thread-panel,.channel-button,.reaction,.send-nappi){animation:none;transition:none;scroll-behavior:auto}}

/* HallaBit Kalenteri 2.11.2026: sisältö ja lomakkeet, yhteiset teemamuuttujat. */
.tyotila .shell:has(>.kal-sivu){height:calc(100dvh - 68px);min-height:0;background:var(--bg)}
.tyotila .shell:has(>.kal-sivu)>main{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.tyotila main>.content:has(#kalenteri-app){flex:1;min-height:0;display:flex}
.tyotila .kal-sivu{background:var(--surface);overflow-y:auto;padding:24px 16px}
.tyotila .kal-sivu h2{font-size:22px;letter-spacing:-.03em;margin:0 0 4px}
.tyotila .kal-sivu .eyebrow{margin:0 0 24px}
.tyotila .kal-sivu :is(.kal-mini-paiva,.kal-mini-vp){color:var(--text)}
.tyotila .kal-sivu .kal-mini-paiva.kal-valittu{background:var(--toissa)}
.tyotila .kal-sivu .kal-mini-paiva.kal-tama-paiva{background:var(--primary);color:var(--primary-ink)}
.tyotila .kal-sivu .kal-mini-paiva.kal-muu-kk{color:var(--text-2);opacity:1}
.tyotila .kal-sivu .kal-mini-paa{font-size:13px;gap:4px}
.tyotila .kal-sivu .kal-mini-paa .kal-nuoli{width:44px;height:44px;flex:none}
.tyotila .kal-sivu .kal-kytkin{min-height:44px;font-size:13px}
.tyotila .kal-sivu .kal-vari{border-radius:50%}
.tyotila .kal-sivu .kal-tapahtuma{border-radius:var(--sade-pieni);padding:10px 12px;border:1px solid var(--line);border-left:3px solid var(--success);background:var(--toissa)}
#kalenteri-app{flex:1;min-height:0;padding:20px 24px 16px;gap:12px;--kal-aikaleveys:56px}
#kalenteri-app .kal-sivu-paa{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}
#kalenteri-app .kal-sivu-paa h1{font-size:26px;letter-spacing:-.035em;line-height:1.2;margin:0}
#kalenteri-app .kal-sivu-paa .eyebrow{margin:0 0 4px;text-transform:none;letter-spacing:0;font-size:12px}
#kalenteri-app #kal-new-meeting{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;min-height:44px;min-width:44px;background:var(--primary);color:var(--primary-ink)}
#kalenteri-app #kal-new-meeting svg{width:20px;height:20px}
#kalenteri-app .kal-haku{min-height:44px;flex:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--sade-kentta)}
#kalenteri-app .kal-tyokalut{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;flex:none}
#kalenteri-app .kal-otsikko{order:-1;flex:1 0 100%;text-align:left}
#kalenteri-app .kal-otsikko h2{font-size:17px;letter-spacing:-.02em}
#kalenteri-app .kal-vyohyke{font-size:11px}
#kalenteri-app :is(.kal-nakymat,.kal-siirto){display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:var(--sade-kortti);background:var(--surface)}
#kalenteri-app :is(.kal-nakymat,.kal-siirto) button{min-height:44px;min-width:44px;padding:0 12px;border:0;background:transparent;color:var(--text);font-size:12px;line-height:1.2}
#kalenteri-app :is(.kal-nakymat,.kal-siirto) button+button{border-left:0}
#kalenteri-app .kal-siirto .kal-nuoli{width:44px;height:44px;padding:0}
#kalenteri-app .kal-nakymat button[aria-pressed=true]{background:var(--primary);color:var(--primary-ink)}
#kalenteri-app :is(.kal-siirto button,.kal-nakymat button:not([aria-pressed=true])):hover{background:var(--toissa);color:var(--text)}
#kalenteri-app .kal-tilarivi{flex:none;min-height:0}
#kalenteri-app .kal-tilarivi:has(p:empty):not(:has(button:not([hidden]))){display:none}
#kalenteri-app .kal-nakyma{flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto;border-radius:var(--sade-kortti)}
#kalenteri-app .kal-ruudukko{flex:1;min-height:0;border:1px solid var(--line);border-radius:var(--sade-kortti)}
#kalenteri-app .kal-vieritys{flex:1;min-height:0;max-height:none;overflow-y:auto}
#kalenteri-app .kal-paaotsikko{min-height:52px;min-width:44px;padding:8px 4px;color:var(--text);font-size:12px;border-left:1px solid var(--line)}
#kalenteri-app .kal-paaotsikko.kal-tama-paiva{background:var(--toissa);color:var(--text)}
#kalenteri-app .kal-kokopaiva{min-height:32px}
#kalenteri-app .kal-aikaotsikko{font-size:10px;line-height:1.4;padding:8px 4px}
#kalenteri-app .kal-tunti{font-size:11px;color:var(--text-2);padding:4px 8px 0 0}
#kalenteri-app .kal-nyt{background:var(--kal-nyt)}
#kalenteri-app button.kal-tapahtuma{min-width:44px;min-height:44px;padding:6px 8px;border:1px solid var(--line);border-left:3px solid var(--success);border-radius:var(--sade-pieni);background:var(--kal-tapahtuma-pohja);color:var(--kal-tapahtuma-teksti);font-size:12px;font-weight:600;line-height:1.3;gap:2px;opacity:1}
#kalenteri-app button.kal-tapahtuma .kal-aika{color:inherit;font-size:11px;font-weight:500}
#kalenteri-app button.kal-tapahtuma.kal-varattu{background:var(--toissa);border-left-color:var(--tt-linkki);color:var(--text)}
#kalenteri-app button.kal-tapahtuma.kal-kutsu{border:1px dashed var(--tt-linkki);border-left-width:3px;background:var(--surface);color:var(--text)}
#kalenteri-app button.kal-tapahtuma.kal-ehka{background:repeating-linear-gradient(135deg,var(--toissa) 0 6px,var(--surface) 6px 12px);color:var(--text)}
#kalenteri-app button.kal-tapahtuma.kal-ai{border-left-color:var(--kupla-ai-raita);background:var(--kupla-ai);color:var(--kupla-ai-teksti)}
#kalenteri-app button.kal-tapahtuma.kal-cancelled{opacity:1}
#kalenteri-app button.kal-tapahtuma.kal-lyhyt{flex-direction:column;align-items:flex-start;padding:4px 8px}
#kalenteri-app button.kal-tapahtuma:hover{filter:brightness(.98)}
#kalenteri-app button.kal-tapahtuma:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
#kalenteri-app .kal-kuukausi{flex:1;min-width:770px;grid-template-rows:32px repeat(6,minmax(100px,1fr));overflow:visible;border-radius:var(--sade-kortti);border-color:var(--line)}
#kalenteri-app .kal-kk-paiva{min-height:100px;padding:4px;gap:4px;overflow:hidden}
#kalenteri-app .kal-kk-numero{min-width:44px;min-height:44px;opacity:1;color:var(--text)}
#kalenteri-app .kal-kk-paiva.kal-tama-paiva .kal-kk-numero{color:var(--primary-ink)}
#kalenteri-app .kal-kk-paiva button.kal-tapahtuma{padding:4px 6px;flex-direction:column;align-items:flex-start;font-size:11px;flex:none}
#kalenteri-app .kal-lisaa{min-height:44px;min-width:44px;color:var(--tt-linkki);flex:none}
#kalenteri-app .kal-asialista{min-height:100%;flex:none;border-radius:var(--sade-kortti);border-color:var(--line);gap:0}
#kalenteri-app .kal-as-paiva{padding:16px;gap:8px}
#kalenteri-app .kal-as-paiva h3{font-size:13px;color:var(--text);margin:0 0 4px}
#kalenteri-app button.kal-tapahtuma.kal-as-rivi{min-height:52px;padding:12px;flex-direction:row;gap:12px;align-items:center}
#kalenteri-app .kal-tyhja{padding:32px 20px;font-size:14px;text-align:center;line-height:1.6}
#kalenteri-app .kal-popover{width:380px;padding:20px;border:1px solid var(--line);border-radius:var(--sade-kortti);box-shadow:var(--varjo-nosto);background:var(--surface);color:var(--text)}
#kalenteri-app .kal-pop-paa{align-items:center}
#kalenteri-app .kal-pop-paa h3{font-size:19px;line-height:1.35;margin:0}
#kalenteri-app .kal-popover [data-kal=sulje]{width:44px;height:44px;min-width:44px;min-height:44px;color:var(--text);background:transparent}
#kalenteri-app .kal-popover dl{grid-template-columns:1fr;gap:4px;margin:16px 0 0;font-size:14px;line-height:1.5}
#kalenteri-app .kal-popover dt{font-size:12px;margin-top:6px;color:var(--text-2)}
#kalenteri-app .kal-popover dd{margin-bottom:4px}
.tyotila #kal-meeting-dialog{padding:24px;border:1px solid var(--line);border-radius:var(--sade-kortti);box-shadow:var(--varjo-nosto)}
.tyotila #kal-meeting-dialog .dialogi-otsikko{gap:12px;align-items:center}
.tyotila #kal-meeting-dialog h2{font-size:23px;letter-spacing:-.03em}
.tyotila #kal-meeting-dialog .dialogi-sulje{width:44px;height:44px;min-width:44px;min-height:44px;margin:0;flex:none;display:grid;place-items:center;padding:10px;background:transparent;color:var(--text);border:0}
.tyotila #kal-meeting-dialog .dialogi-sulje svg{width:22px;height:22px}
.tyotila #kal-meeting-form{gap:10px}
.tyotila #kal-meeting-form :is(input,select,textarea){min-height:44px;min-width:44px;border:1px solid var(--line);border-radius:var(--sade-kentta)}
.tyotila #kal-meeting-form :is(.kal-person,.kal-more>summary){min-height:44px;min-width:44px}
.tyotila #kal-meeting-form .kal-person{font-size:13px;gap:8px}
.tyotila #kal-meeting-form .kal-person input{width:44px;height:44px;margin:0;accent-color:var(--primary)}
.tyotila #kal-meeting-form :is(.kal-attendee-picker,#kal-availability){border-radius:var(--sade-pieni);border-color:var(--line);padding:12px 16px}
.tyotila #kal-meeting-people{max-height:144px;gap:4px 12px}
.tyotila #kal-meeting-form>footer{bottom:-24px;padding:12px 0;gap:8px}
.tyotila #kal-meeting-form>footer button{margin:0;min-height:44px;min-width:44px}
.tyotila .kal-invite-panel{padding:8px 16px;margin:12px 24px 0;flex:none;max-height:36vh;overflow:auto;border-radius:var(--sade-kortti);box-shadow:none}
.tyotila .kal-invite-panel>summary{display:flex;align-items:center;min-height:44px;min-width:44px;font-size:13px;list-style:none;gap:12px}
.tyotila .kal-invite-panel>summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);flex:none}
.tyotila .kal-invite-panel[open]>summary::before{transform:rotate(45deg)}
.tyotila .kal-invite-panel>summary::-webkit-details-marker{display:none}
.tyotila .kal-invite-card{padding:12px 0;gap:8px}
.tyotila .kal-invite-card .toolbar button{min-width:44px;min-height:44px}
.tyotila .kalenteri-asetukset{max-width:1000px;margin:0 auto;padding:28px 24px;background:var(--bg)}
.tyotila .kalenteri-asetukset h1{font-size:28px;letter-spacing:-.03em}
.tyotila .kalenteri-asetukset>p{max-width:72ch;line-height:1.65}
.tyotila .kalenteri-asetukset .panel{border:1px solid var(--line);border-radius:var(--sade-kortti);padding:24px}
.tyotila .kalenteri-asetukset h2{font-size:19px;margin-top:0}
.tyotila .kalenteri-asetukset form :is(input,select,button){min-height:44px;min-width:44px;border-radius:var(--sade-kentta)}
.tyotila .kalenteri-asetukset fieldset label{min-height:44px;font-size:14px;line-height:1.5;margin:8px 0;gap:12px}
.tyotila .kalenteri-asetukset fieldset input{width:44px;height:44px;flex:none;margin:0;accent-color:var(--primary)}
@media(max-width:700px){
 .tyotila .shell:has(>.kal-sivu){height:calc(100dvh - 122px);min-height:0;padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
 .tyotila .shell:has(>.kal-sivu)>main{flex:1;min-height:0}
 .tyotila .kal-sivu{padding:6px 12px;overflow:auto;flex:none;max-height:40vh}
 .tyotila .kal-sivu>h2,.tyotila .kal-sivu>.eyebrow{display:none}
 .tyotila .kal-sivu .kal-mini{max-width:320px;margin:8px auto}
 .tyotila .kal-invite-panel{margin:6px 12px 0;padding:0 12px;max-height:30vh}
 #kalenteri-app{padding:10px 12px 8px;gap:8px;min-height:0}
 #kalenteri-app .kal-sivu-paa h1{font-size:22px}
 #kalenteri-app .kal-sivu-paa .eyebrow{display:none}
 #kalenteri-app #kal-new-meeting{padding:0 12px;font-size:12px}
 #kalenteri-app .kal-haku{display:flex}
 #kalenteri-app .kal-tyokalut{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ots siir" "nak nak";gap:8px}
 #kalenteri-app .kal-otsikko{grid-area:ots;order:0}
 #kalenteri-app .kal-otsikko h2{font-size:12px;line-height:1.4}
 #kalenteri-app .kal-vyohyke{display:none}
 #kalenteri-app .kal-siirto{grid-area:siir;padding:0;border:0;background:transparent}
 #kalenteri-app .kal-siirto button{padding:0 8px;font-size:11px}
 #kalenteri-app .kal-nakymat{grid-area:nak;width:100%;padding:2px}
 #kalenteri-app .kal-nakymat button{flex:1;font-size:12px;padding:0 6px}
 #kalenteri-app[data-nakyma=viikko] .kal-ruudukko{min-width:1056px;overflow:hidden}
 #kalenteri-app[data-nakyma=viikko] .kal-ruudukko>.kal-rivi,#kalenteri-app[data-nakyma=viikko] .kal-vieritys{min-width:0}
 #kalenteri-app .kal-ruudukko{min-height:0}
 #kalenteri-app .kal-popover{position:fixed;inset:auto 12px 96px!important;width:auto;max-width:none;max-height:calc(100dvh - 120px);padding:20px}
 .tyotila #kal-meeting-dialog{padding:20px;max-height:calc(100dvh - 24px)}
 .tyotila #kal-meeting-form>footer{bottom:-20px}
 .tyotila .kalenteri-asetukset{padding:20px 16px 100px}
 .tyotila .kalenteri-asetukset .panel{padding:20px}
}
@media(prefers-reduced-motion:reduce){
 #kalenteri-app *,#kal-meeting-dialog *,.kal-sivu *,.kal-invite-panel *,.kalenteri-asetukset *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Kalenterin mitatut korjaukset: kompakti otsake, luettavat metat ja kenttien muodot. */
#kalenteri-app .kal-sivu-paa>div{flex:1;min-width:0}
#kalenteri-app .kal-sivu-paa [data-kal=sync]{width:44px;height:44px;min-width:44px;min-height:44px;display:grid;place-items:center;padding:10px;flex:none}
#kalenteri-app .kal-sivu-paa [data-kal=sync] svg{width:22px;height:22px}
#kalenteri-app .kal-sivu-paa #kal-new-meeting{order:0}
.tyotila .kal-sivu .kal-tanaan-lista :is(.kal-aika,.muted){color:var(--text)}
.tyotila :is(.kal-sivu,#kal-meeting-form,.kalenteri-asetukset) input:is([type=checkbox],[type=radio]){appearance:none;-webkit-appearance:none;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--sade-kentta);background:var(--surface);display:inline-grid;place-content:center;cursor:pointer}
.tyotila :is(.kal-sivu,#kal-meeting-form,.kalenteri-asetukset) input:is([type=checkbox],[type=radio])::after{display:none}
.tyotila :is(.kal-sivu,#kal-meeting-form,.kalenteri-asetukset) input:is([type=checkbox],[type=radio]):checked{background:var(--primary);border-color:var(--primary)}
.tyotila :is(.kal-sivu,#kal-meeting-form,.kalenteri-asetukset) input:is([type=checkbox],[type=radio]):checked::before{content:"";display:block;width:14px;height:8px;border-left:3px solid var(--primary-ink);border-bottom:3px solid var(--primary-ink);transform:rotate(-45deg) translateY(-2px)}
.tyotila .kalenteri-asetukset input[type=radio]{border-radius:50%}
@media(max-width:700px){
 #kalenteri-app{overflow-y:auto;overflow-x:hidden}
 #kalenteri-app .kal-nakyma{min-height:220px;flex-shrink:0}
 #kalenteri-app .kal-sivu-paa{gap:6px}
 #kalenteri-app .kal-sivu-paa #kal-new-meeting{gap:4px;padding:0 10px}
}
/* Kuukauden tyhjät rivit pysyvät tiiviinä; aikaruudukon lyhyt merkintä näyttää otsikon ensin. */
#kalenteri-app .kal-kuukausi{flex:none;grid-template-rows:32px repeat(6,minmax(100px,auto));align-content:start}
#kalenteri-app .kal-sarake button.kal-tapahtuma{padding:4px 8px}
#kalenteri-app .kal-sarake button.kal-tapahtuma .kal-nimi,#kalenteri-app .kal-sarake button.kal-tapahtuma:not(.kal-lyhyt) .kal-nimi{order:-1;white-space:nowrap}
#kalenteri-app button.kal-tapahtuma .kal-aika{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;flex:none}
/* Toissijaisen tumman pinnan metat ja valitun minikalenteripäivän teksti. */
.tyotila #kal-availability .muted,.tyotila .kal-sivu .kal-mini-paiva.kal-muu-kk.kal-valittu{color:var(--text)}

/* Asetussisällöt 2.11.2026: sama HallaBit-paletti ja tallennuslomakkeet. */
.tyotila .settings-home>.sivupalkki{display:none}
.tyotila .settings-home>main{min-width:0;overflow:visible}
.tyotila .settings-main>.viewhead{padding:24px 32px;background:var(--bg);border:0}
.tyotila .settings-main>.viewhead .eyebrow{margin:0 0 8px}
.tyotila .settings-main>.viewhead .muted{margin:8px 0 0;font-size:14px}
.tyotila .settings-content{width:100%;max-width:1024px;margin:0 auto;padding:24px 32px;min-width:0;overflow-wrap:anywhere;color:var(--text)}
.tyotila .settings-main>.settings-content{padding-top:4px}
.tyotila .settings-content>.panel,.tyotila .settings-content .settings-section>.panel{margin:0 0 24px;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--sade-kortti);box-shadow:var(--varjo-kortti)}
.tyotila .settings-content :is(h1,h2,h3){color:var(--text)}
.tyotila .settings-content h1{margin:12px 0 24px;font-size:28px}
.tyotila .settings-content h2{margin:0 0 8px;font-size:18px;font-weight:800}
.tyotila .settings-content h3{font-size:16px}
.tyotila .settings-content p{font-size:14px;line-height:1.6}
.tyotila .settings-content :is(.muted,.settings-description){color:var(--text-2);font-size:13px;line-height:1.6;margin:6px 0 16px}
.tyotila .settings-content form{max-width:none;min-width:0}
.tyotila .settings-profile-grid{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:32px;margin-top:24px}
.tyotila .settings-profile-grid .avatar-editor{align-content:start;gap:12px;margin:0}
.tyotila .settings-profile-grid .avatar-preview{margin-bottom:4px}
.tyotila .settings-profile-grid .avatar-editor .toolbar{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.tyotila .settings-profile-grid .avatar-editor .toolbar button{margin:0;width:100%;font-size:14px}
.tyotila .settings-profile-form .settings-field{min-height:44px;border-radius:var(--sade-pieni);margin-bottom:20px}
.tyotila .settings-content label{font-size:14px;line-height:1.5;margin:0 0 8px;font-weight:700}
.tyotila .settings-content :is(input:not([type=hidden]),select,textarea){font-size:16px;min-width:44px;min-height:44px;border-radius:var(--sade-kentta);border-color:var(--line);max-width:100%}
.tyotila .settings-content .settings-field>input,.tyotila .settings-content .settings-field>select{width:100%;margin:0}
.tyotila .settings-content input[type=file]{width:100%;padding:8px;font-size:13px}
.tyotila .settings-content input::file-selector-button{min-height:44px;min-width:44px;padding:8px 12px;margin:0 8px 0 0;border:1px solid var(--line);border-radius:var(--sade-nappi);background:var(--surface);color:var(--text);font:inherit;font-weight:700;cursor:pointer}
.tyotila .settings-content :is(button,.settings-security,.settings-link-row a,.settings-tabs a){min-height:44px;min-width:44px}
.tyotila .settings-content button{border-radius:var(--sade-nappi);font-size:14px}
.tyotila .settings-content :is(button.secondary,button.ghost){color:var(--text)}
.tyotila :is(#main.settings-content,#main .settings-content) button.destructive,.tyotila body:has(.settings-content) .account button{background:var(--surface);color:var(--danger);border:1px solid var(--danger)}
.tyotila :is(#main.settings-content,#main .settings-content) button.destructive:hover:not(:disabled),.tyotila body:has(.settings-content) .account button:hover{background:var(--surface);color:var(--danger);border-color:var(--danger);text-decoration:underline}
.tyotila .settings-content .settings-security{display:flex;align-items:center;margin:24px 0 0;padding:12px 16px;border:1px solid var(--line);border-radius:var(--sade-pieni);font-size:14px;text-decoration:none}
.tyotila .settings-links .settings-link-row{position:relative;min-height:44px;padding:16px 0;border-bottom:1px solid var(--line);border-radius:var(--sade-pieni)}
.tyotila .settings-links .settings-link-row:last-child{border-bottom:0;padding-bottom:0}
.tyotila .settings-links .settings-link-row>a{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:0;padding:8px 12px;border-radius:var(--sade-pieni);color:var(--text);text-decoration:none;font-weight:700;font-size:15px}
.tyotila .settings-link-row>a:hover{background:var(--toissa)}
.tyotila .settings-link-row p{color:var(--text-2);font-size:13px;margin:0 12px}
.tyotila .settings-chevron{width:20px;height:20px;flex:none}
.tyotila .settings-content .member-row{min-height:44px;padding:20px 0;gap:12px;border-radius:var(--sade-pieni)}
.tyotila .settings-content .member-row:last-of-type{border-bottom:0}
.tyotila .settings-content .member-row .avatar{width:44px;height:44px}
.tyotila .settings-content .member-row strong{font-size:15px}
.tyotila .settings-content .member-row form{display:grid;grid-template-columns:minmax(140px,1fr) auto auto;gap:8px;width:100%;align-items:center}
.tyotila .settings-content .member-row form :is(button,select){margin:0;width:100%}
.tyotila .settings-content .settings-tabs{gap:8px;margin:16px 0 24px}
.tyotila .settings-content .settings-tabs a{padding:12px 16px;font-size:14px;font-weight:700;border-radius:var(--sade-nappi);color:var(--text);background:var(--surface)}
:root.tyotila .settings-content .settings-tabs a[aria-selected=true]{color:var(--primary-ink);background:var(--primary);border-color:var(--primary)}
.tyotila .settings-content .settings-section{border-radius:var(--sade-kortti)}
.tyotila .settings-content .compact-form{gap:20px;margin-top:20px}
.tyotila .settings-content fieldset{min-width:0;border:1px solid var(--line);border-radius:var(--sade-pieni);padding:16px;margin:20px 0}
.tyotila .settings-content fieldset legend{padding:0 8px;font-size:14px;font-weight:700;color:var(--text)}
.tyotila .settings-content fieldset label,.tyotila .settings-content label:has(>input:is([type=checkbox],[type=radio])){display:flex;align-items:center;gap:12px;min-height:44px;margin:0;padding:8px 0;font-size:14px;font-weight:500;border-radius:var(--sade-pieni)}
.tyotila .settings-content input:is([type=checkbox],[type=radio]){appearance:none;-webkit-appearance:none;display:inline-grid;place-content:center;position:relative;flex:none;width:44px;height:44px;padding:0;margin:0;border:1px solid var(--line);border-radius:var(--sade-pieni);background:var(--surface);cursor:pointer}
.tyotila .settings-content input:is([type=checkbox],[type=radio])::after{display:none}
.tyotila .settings-content input:is([type=checkbox],[type=radio]):checked{background:var(--primary);border-color:var(--primary)}
.tyotila .settings-content input[type=checkbox]:checked::before{content:"";width:14px;height:8px;border-left:3px solid var(--primary-ink);border-bottom:3px solid var(--primary-ink);transform:rotate(-45deg) translateY(-2px)}
.tyotila .settings-content input[type=radio]{border-radius:50%}
.tyotila .settings-content input[type=radio]:checked::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--primary-ink)}
/* Kytkimen pinta on 52 × 28, mutta itse osuma-alue on 52 × 44. */
.tyotila .settings-content input:is(#notification-preview,[name=enabled],[name=disabled]){width:52px;height:44px;border:0;background:transparent}
.tyotila .settings-content input:is(#notification-preview,[name=enabled],[name=disabled])::before{content:"";position:absolute;inset:8px 0;width:52px;height:28px;border:1px solid var(--text-2);border-radius:var(--sade-pieni);background:var(--toissa);transform:none}
.tyotila .settings-content input:is(#notification-preview,[name=enabled],[name=disabled])::after{content:"";display:block;position:absolute;left:5px;top:12px;width:20px;height:20px;border-radius:50%;background:var(--text-2);transition:transform .15s ease}
.tyotila .settings-content input:is(#notification-preview,[name=enabled],[name=disabled]):checked::before{background:var(--primary);border-color:var(--primary)}
.tyotila .settings-content input:is(#notification-preview,[name=enabled],[name=disabled]):checked::after{background:var(--primary-ink);transform:translateX(22px)}
/* JS parantaa alkuperäisen selectin esitystä; ilman JS:ää select toimii. */
.tyotila .settings-theme select[hidden]{display:none!important}
.tyotila .settings-theme-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border:1px solid var(--line);border-radius:var(--sade-kortti);background:var(--toissa)}
.tyotila .settings-theme-picker button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;margin:0;padding:10px 8px!important;background:transparent;border:1px solid transparent;color:var(--text);font-size:13px!important;line-height:1.4;white-space:normal}
.tyotila .settings-theme-picker button[aria-checked=true]{background:var(--surface);border-color:var(--line);color:var(--text);box-shadow:var(--varjo-kortti)}
.tyotila .settings-theme-picker button:hover{background:var(--surface);border-color:var(--line)}
.tyotila .settings-theme-picker svg{width:18px;height:18px;flex:none}
.tyotila .settings-content>a:first-child{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;margin:0 0 8px;border-radius:var(--sade-pieni);font-size:14px;text-decoration:none}
.tyotila .settings-standalone{min-height:100dvh}
.tyotila body:has(.settings-content) .account summary{min-width:44px;min-height:44px;padding:12px;border-radius:var(--sade-pieni)}
.tyotila body:has(.settings-content) .account .menu :is(a,button){display:flex;align-items:center;min-width:44px;min-height:44px;border-radius:var(--sade-pieni);font-size:14px}
@media(max-width:700px){
 .tyotila .settings-shell{display:flex;flex-direction:column;grid-template-columns:minmax(0,1fr);padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
 .tyotila .settings-content{max-width:none;width:100%;padding:20px 16px}
 .tyotila .settings-main>.viewhead{padding:24px 16px 20px}
 .tyotila .settings-content>.panel,.tyotila .settings-content .settings-section>.panel{width:100%;padding:20px;margin-bottom:20px}
 .tyotila .settings-profile-grid{grid-template-columns:minmax(0,1fr);gap:24px}
 .tyotila .settings-profile-grid .settings-profile-form{order:-1;padding-bottom:24px;border-bottom:1px solid var(--line)}
 .tyotila .settings-content .member-row form{grid-template-columns:minmax(0,1fr)}
 .tyotila .settings-content .compact-form,.tyotila .settings-content fieldset{grid-template-columns:minmax(0,1fr)}
 .tyotila .settings-content .settings-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .tyotila .settings-content .settings-tabs a{justify-content:center;padding:10px 8px;text-align:center}
 .tyotila .settings-theme-picker button{flex-direction:column;font-size:12px!important;padding:8px 4px!important}
 .tyotila .settings-content .toolbar>button{flex:1 1 auto}
}
@media(prefers-reduced-motion:reduce){.tyotila .settings-content *,.tyotila .settings-content *::before,.tyotila .settings-content *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Keskustelujen kautta avautuvat työtilan ja tiimien asetukset. */
.tyotila dialog.settings-dialog{width:min(680px,calc(100vw - 32px));padding:24px;border:1px solid var(--line);border-radius:var(--sade-kortti);background:var(--surface);color:var(--text)}
.tyotila .settings-dialog :is(input:not([type=hidden]),select,button){min-width:44px;min-height:44px;border-radius:var(--sade-kentta)}
.tyotila .settings-dialog :is(label,legend){font-size:14px;color:var(--text)}
.tyotila .settings-dialog fieldset{border:1px solid var(--line);border-radius:var(--sade-pieni);padding:12px;min-width:0}
.tyotila .settings-dialog fieldset label{gap:12px;padding:8px 0;border-radius:var(--sade-pieni)}
.tyotila .settings-dialog input[type=checkbox]{appearance:none;-webkit-appearance:none;display:inline-grid;place-content:center;flex:none;width:44px;height:44px;padding:0;margin:0;border:1px solid var(--line);border-radius:var(--sade-pieni);background:var(--surface)}
.tyotila .settings-dialog input[type=checkbox]::after{display:none}
.tyotila .settings-dialog input[type=checkbox]:checked{background:var(--primary);border-color:var(--primary)}
.tyotila .settings-dialog input[type=checkbox]:checked::before{content:"";width:14px;height:8px;border-left:3px solid var(--primary-ink);border-bottom:3px solid var(--primary-ink);transform:rotate(-45deg) translateY(-2px)}
.tyotila #team-management{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.tyotila .settings-team-row{min-height:44px;display:flex;flex-wrap:wrap;gap:8px;padding:16px;border:1px solid var(--line);border-radius:var(--sade-pieni);background:var(--surface)}
.tyotila .settings-team-row h3{width:100%;margin:0 0 4px;font-size:16px}
.tyotila .settings-team-row button{margin:0}
.tyotila #picker-form:has(#picker-team[hidden]) label[for=picker-team],.tyotila #picker-form:has(#picker-name[hidden]) label[for=picker-name]{display:none}
@media(max-width:700px){
 .tyotila dialog.settings-dialog{padding:20px;max-height:calc(100dvh - 32px - env(safe-area-inset-bottom,0px))}
 .tyotila .settings-dialog .dialogi-otsikko{flex-wrap:wrap}
 .tyotila .settings-dialog .dialogi-toiminnot{order:3;width:100%;margin:0;flex-wrap:wrap}
 .tyotila .settings-team-row{flex-direction:column;align-items:stretch}
}
@media(prefers-reduced-motion:reduce){.tyotila .settings-dialog *,.tyotila .settings-dialog *::before,.tyotila .settings-dialog *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.tyotila :is(#management,#picker) button.secondary{background:var(--surface);color:var(--text);border:1px solid var(--line)}
.tyotila :is(#management,#picker) button.secondary:hover{background:var(--toissa);border-color:var(--line)}
.tyotila .account summary{border-radius:var(--sade-pieni)}

/* Run6: asetusten kutsupalkki samalle leveydelle kuin profiilikortti. */
@media(min-width:701px){
 .tyotila .settings-home .kal-invite-panel{width:calc(100% - 64px);max-width:960px;margin-inline:auto}
}

/* Run6B: etusivu käyttää yhteisiä HallaBit-värejä ja nykyistä sovelluskehystä. */
.tyotila .home-shell{display:block}
.tyotila .home-topbar{margin-left:var(--rail-width)}
.home-topbar-title{flex:1;font-weight:700}
.tyotila .home-main{padding:28px 28px 40px;max-width:1560px;margin-inline:auto;min-width:0;background:var(--bg);border:0;border-radius:var(--sade-kortti)}
.home-main svg{width:22px;height:22px;flex-shrink:0}
.home-greeting{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.home-greeting h1{font-size:30px;letter-spacing:-.035em;margin:4px 0 8px;overflow-wrap:anywhere}
.home-greeting p{margin:0;color:var(--text-2);font-size:13px}
.tyotila :is(.home-calendar-link,.home-quicklinks a,.home-all){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:10px 14px;border-radius:var(--sade-nappi);text-decoration:none;font-size:13px;font-weight:700}
.tyotila .home-calendar-link{background:var(--primary);color:var(--primary-ink);flex-shrink:0}
.home-quicklinks{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.tyotila .home-quicklinks a{background:var(--surface);color:var(--text);border:1px solid var(--line)}
.home-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:24px}
.tyotila .home-summary a{display:flex;align-items:center;gap:14px;padding:20px;border-radius:var(--sade-kortti);background:var(--tt-nav);color:var(--tt-nav-teksti);text-decoration:none;min-width:44px;min-height:100px;font-size:12px}
.home-summary a>svg{color:var(--primary);width:28px;height:28px}
.home-summary strong{display:block;color:var(--primary);font-size:30px;line-height:1.15;margin-bottom:4px}
.home-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.home-column{display:grid;gap:20px;min-width:0}
.home-panel{border:1px solid var(--line);border-radius:var(--sade-kortti);padding:18px;background:var(--surface);box-shadow:var(--varjo-kortti);min-width:0;overflow-wrap:anywhere}
.home-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.home-panel-head h2{display:flex;align-items:center;gap:8px;font-size:16px;margin:0;min-width:0;letter-spacing:-.02em}
.tyotila .home-all{font-size:12px;gap:2px;padding:8px 4px;flex-shrink:0}
.home-all svg{width:16px;height:16px}
.home-caption{font-size:12px;color:var(--text-2);margin:0 0 10px;line-height:1.5}
.tyotila .home-row{display:flex;align-items:center;gap:10px;padding:12px 10px;min-height:64px;min-width:44px;border-radius:var(--sade-pieni);text-decoration:none;color:var(--text);margin-top:4px;background:var(--tt-pinta2)}
.tyotila :is(.home-row,.home-quicklinks a):hover{background:var(--toissa)}
.home-row>svg{width:16px;height:16px;color:var(--text-2)}
.home-row-text{display:grid;gap:5px;min-width:0;flex:1;font-size:13px}
.home-row-text strong{font-weight:700;line-height:1.45}
.home-row-text>span{color:var(--text-2);font-size:12px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home-row-text small{font-size:11px;color:var(--text-2)}
.home-row-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;color:var(--text)}
.home-event-date{font-size:15px;font-weight:800;min-width:40px;color:var(--text)}
.home-unread{background:var(--primary);color:var(--primary-ink);border-radius:var(--sade-pieni);min-width:28px;padding:5px 7px;text-align:center;font-size:12px;font-weight:800}
.home-empty{display:flex;align-items:flex-start;flex-direction:column;gap:10px;padding:22px 10px;color:var(--text);font-size:14px}
.home-empty>svg{width:32px;height:32px;color:var(--text-2)}
.home-empty p{color:var(--text-2);font-size:13px;margin:0;line-height:1.65}
@media(min-width:701px) and (max-width:1200px){.home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-column:last-child{grid-column:1/-1}.tyotila .home-main{padding:24px 20px}.home-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
 .tyotila .rail,.settings-shell .rail,#kanban-app .rail{grid-template-columns:repeat(5,minmax(0,1fr));inset:auto 8px 8px;padding-inline:4px}
 .tyotila .rail a,.settings-shell .rail a,#kanban-app .rail a{font-size:10px}
 .tyotila .home-topbar{margin-left:0;min-height:68px;height:auto;flex-wrap:wrap;gap:8px;padding:10px 12px}
 .home-topbar .brand{display:none}.home-topbar .hallalink-paluu{font-size:12px}
 .tyotila .home-shell{margin-left:0;padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
 .tyotila .home-main{padding:20px 12px 24px}
 .home-greeting{display:block;margin-bottom:16px}.home-greeting h1{font-size:27px}.home-greeting p{font-size:12px}
 .tyotila .home-calendar-link{margin-top:16px;width:100%}
 .home-quicklinks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:16px}
 .tyotila .home-quicklinks a{flex-direction:column;font-size:12px;padding:12px 4px;gap:6px}
 .home-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:16px}
 .tyotila .home-summary a{padding:16px 12px;gap:8px;font-size:11px;min-height:102px}.home-summary a>svg{width:22px;height:22px}.home-summary strong{font-size:28px}
 .home-grid{grid-template-columns:minmax(0,1fr);gap:16px}.home-column{gap:16px}.home-panel{padding:16px}
}
.home-summary a>span{color:var(--tt-nav-teksti)}

/* Run7: täysleveät etusivurivit ja luettava työalue kapealla työpöydällä. */
.tyotila .home-panel>a.home-row{display:flex;width:100%;padding:12px;border-radius:var(--sade-pieni)}
.tyotila .topbar .hallalink-paluu{flex-shrink:0;white-space:nowrap}
.tyotila .topbar #notifications-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;white-space:nowrap;padding:0 10px;min-height:44px}
@media(min-width:701px) and (max-width:900px){
 .tyotila{--rail-width:88px}
 .tyotila .rail{padding:8px}
 .tyotila .rail-brand{align-items:center;padding:8px;min-height:84px}
 .tyotila .rail-brand img{width:64px}
 .tyotila .rail-brand strong{font-size:11px}
 .tyotila .rail a{flex-direction:column;justify-content:center;gap:6px;padding:8px 2px;font-size:11px;min-height:64px;text-align:center}
}
@media(min-width:701px) and (max-width:1000px){
 .tyotila .shell:has(>.kal-sivu){grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
 .tyotila .kal-sivu{max-height:200px;padding:8px 16px}
 .tyotila .kal-sivu>h2,.tyotila .kal-sivu>.eyebrow{display:none}
 .tyotila .kal-sivu .kal-mini{max-width:320px;margin-inline:auto}
 .tyotila .kal-sivu .kal-taitto>summary{display:flex;align-items:center;position:sticky;top:-8px;z-index:1;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--sade-pieni);background:var(--surface);color:var(--tt-linkki)}
 #kalenteri-app[data-nakyma=viikko] .kal-ruudukko{min-width:1056px;overflow:hidden}
 #kalenteri-app[data-nakyma=viikko] .kal-ruudukko>.kal-rivi,#kalenteri-app[data-nakyma=viikko] .kal-vieritys{min-width:0}
}
/* Run8: kutsut vievät oman rajatun tilansa keskustelun yläpuolella. */
.tyotila .kal-invite-panel{position:static;flex:0 0 auto;min-height:0;padding:0;margin:8px 16px 0;max-height:35vh;overflow:auto;overscroll-behavior:contain;border-radius:var(--sade-kortti);color:var(--text)}
.tyotila .kal-invite-panel>summary{position:sticky;top:0;z-index:1;display:flex;gap:8px;min-width:44px;min-height:44px;padding:0 12px;font-size:12px;line-height:18px;border-radius:var(--sade-pieni);background:var(--surface);color:var(--text)}
.tyotila .kal-invite-panel>summary::before{content:none}
.tyotila .kal-invite-panel>summary>svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tyotila .kal-invite-panel[open]>summary>svg{transform:rotate(90deg)}
.tyotila .kal-invite-panel>summary:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.tyotila .kal-invite-panel>p:empty{display:none}
.tyotila .kal-invite-panel>p:not(:empty){margin:0;padding:8px 12px}
.tyotila .kal-invite-list{padding:0 8px 8px}
.tyotila .kal-invite-card{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:6px 8px;border-radius:var(--sade-pieni)}
.tyotila .kal-invite-info{flex:1 1 220px;min-width:0;line-height:20px}
.tyotila .kal-invite-info>strong,.tyotila .kal-invite-info>p{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:12px;line-height:20px;color:var(--text)}
.tyotila .kal-invite-info>.kal-invite-description{display:none}
.tyotila .kal-invite-info>.kal-invite-meta{display:flex}
.tyotila .kal-invite-meta>span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.tyotila .kal-invite-meta>span:first-child{flex:1}
.tyotila .kal-invite-meta>span:last-child{flex:0 1 auto;max-width:45%}
.tyotila .kal-invite-card .toolbar{flex:0 0 auto;gap:4px;margin:0}
.tyotila .kal-invite-card .toolbar button{min-width:44px;min-height:44px;padding:0 10px;margin:0;font-size:12px;line-height:18px;border-radius:var(--sade-nappi)}
#chat-app .conversation-layout{flex:1 1 0;min-height:0}
#chat-app .conversation{min-height:0}
#chat-app .conversation>#messages{min-height:0;overflow-y:auto}
#chat-app .chat-shell .viewhead{flex-shrink:0}
@media(min-width:701px){
 #chat-app .kal-invite-panel{flex-shrink:1}
 #chat-app .conversation-layout{min-height:calc(40vh + 96px)}
}
@media(max-width:700px){
 .tyotila .kal-invite-panel{margin:6px 8px 0;max-height:min(240px,calc(100dvh - 360px))}
 .tyotila .kal-invite-info{flex-basis:100%}
}

/* Jäljellä olevat sivut 2.11.2026: samat pinnat, rivit ja selkeä hierarkia. */
.tyotila #results{width:min(620px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:24px;overflow:auto;overscroll-behavior:contain;border-radius:var(--sade-kortti);box-shadow:var(--varjo-nosto)}
.tyotila dialog#results{margin:24px auto auto}
.tyotila #results .dialogi-otsikko{position:sticky;top:-24px;z-index:2;flex-wrap:wrap;gap:8px;padding:8px 0 12px;margin:0;background:var(--surface)}
.tyotila #results .dialogi-otsikko h2{font-size:22px;letter-spacing:-.03em}
.tyotila #results .dialogi-toiminnot{flex-wrap:wrap}
.tyotila #results .dialogi-sulje{width:44px;height:44px;flex:none;order:1}
.tyotila #results-body{display:grid;gap:8px;min-width:0}
.tyotila #results :is(button,a).result{display:block;width:100%;margin:0;padding:14px 16px;min-height:52px;border:1px solid var(--line);border-radius:var(--sade-pieni);background:var(--surface);color:var(--text);font-size:14px;line-height:1.55;text-align:left;white-space:normal;overflow-wrap:anywhere;text-decoration:none}
.tyotila #results :is(button,a).result:hover{background:var(--toissa)}
.tyotila #results .ilmoituslista{display:grid;gap:8px;margin:0}
.tyotila #results button.ilmoitusrivi{grid-template-columns:36px minmax(0,1fr) auto 8px;gap:10px;padding:14px 12px;border:1px solid var(--line);border-radius:var(--sade-pieni);background:var(--surface)}
.tyotila #results .ilmoitusrivi.lukematon{background:var(--toissa)}
.tyotila #results .ilmoitusrivi .avatar{width:36px;height:36px}
.tyotila .topbar .account>summary{display:flex;align-items:center;gap:8px;padding:10px 12px;list-style:none;border-radius:var(--sade-pieni)}
.tyotila .topbar .account>summary::-webkit-details-marker{display:none}
.tyotila .topbar .account[open]>summary{background:var(--toissa)}
.tyotila .account-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tyotila .account-chevron{width:16px;height:16px;flex:none}
.tyotila .topbar .account .menu{top:calc(100% + 8px);width:min(300px,calc(100vw - 32px));padding:8px;border-radius:var(--sade-kortti);box-shadow:var(--varjo-nosto);z-index:25}
.tyotila .topbar .account .menu :is(a,button){display:flex;align-items:center;width:100%;min-height:44px;margin:0;padding:10px 12px;border-radius:var(--sade-pieni);font-size:14px;text-align:left;text-decoration:none}
.tyotila .topbar .account .menu a:hover{background:var(--toissa)}
.tyotila .login-topbar{min-height:68px;height:68px;gap:12px}
.tyotila .login-card{width:calc(100% - 32px);max-width:500px;margin:40px auto;padding:32px;border-radius:var(--sade-kortti);box-shadow:var(--varjo-kortti)}
.tyotila .login-card h1{font-size:28px;letter-spacing:-.035em;line-height:1.2;margin:8px 0 16px}
.tyotila .login-card h2{font-size:19px;line-height:1.4;margin:24px 0 12px}
.tyotila .login-card p{font-size:14px;line-height:1.65;color:var(--text-2)}
.tyotila .login-card [role=status]{padding:12px 16px;border:1px solid var(--line);border-radius:var(--sade-pieni);background:var(--toissa);color:var(--text)}
.tyotila .login-card label{font-size:14px;margin-top:20px}
.tyotila .login-card .koodilomake #koodi{font-size:22px;letter-spacing:.2em;font-variant-numeric:tabular-nums;min-height:56px}
.tyotila .login-card form>button{width:100%;margin:12px 0 0}
.tyotila .login-card>a,.tyotila .login-card p>a{padding:8px 12px;border-radius:var(--sade-pieni);font-size:14px}
.tyotila .settings-content>h1{letter-spacing:-.035em;line-height:1.25}
.tyotila .settings-content>p{max-width:75ch}
.tyotila .settings-content .settings-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.tyotila .settings-content .settings-tabs a{justify-content:center;text-align:center;white-space:normal}
.tyotila .settings-content .settings-section>.panel>h2{margin-bottom:16px}
.tyotila .settings-content .avatar-preview{display:flex;align-items:center;min-height:96px}
.tyotila .avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
#chat-app .message .ai-job-status{width:fit-content;max-width:100%;padding:6px 10px;border:1px solid var(--line);border-radius:var(--sade-pieni);background:var(--surface);color:var(--text-2);overflow-wrap:anywhere}
#chat-app .message.oma .ai-job-status{color:var(--text-2)}
#chat-app .thread-panel .thread-context{line-height:1.6;overflow-wrap:anywhere}
@media(max-width:700px){
 .tyotila #results{padding:20px;max-height:calc(100dvh - 32px);width:calc(100vw - 24px)}
 .tyotila dialog#results{margin:16px auto auto}
 .tyotila #results .dialogi-otsikko{top:-20px}
 .tyotila #results .dialogi-otsikko h2{font-size:20px}
 .tyotila #results .dialogi-toiminnot{order:2;flex:1 0 100%}
 .tyotila #results .dialogi-toiminnot:empty{display:none}
 .tyotila #results button.ilmoitusrivi{grid-template-columns:32px minmax(0,1fr) 8px}
 .tyotila #results .ilmoitus-aika{grid-column:2;font-size:12px}
 .tyotila #results .lukematon-piste{grid-column:3;grid-row:1}
 .tyotila .login-card{padding:24px;margin:24px auto}
 .tyotila .settings-content .settings-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Puhelu on kalenterilomakkeen valinnainen huone. */
.tyotila #kal-meeting-form .kal-call-check{display:flex;align-items:center;gap:12px;min-height:44px;font-size:14px}
.tyotila #kal-meeting-form .kal-call-check input{width:44px;height:44px;min-height:44px;margin:0;accent-color:var(--primary)}

/* Kalenteri 390 px 3.11.2026: kaksi ohjainriviä ja yksi vierivä työalue. */
#kalenteri-app .kal-mobile-actions{display:none}
.tyotila #kal-valinnat-dialog{color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--sade-kortti);padding:16px;box-shadow:var(--varjo-nosto)}
.tyotila #kal-valinnat-dialog::backdrop{background:var(--kuvakatselu-tausta)}
.tyotila .kal-valinnat-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tyotila #kal-valinnat-dialog .kal-valinnat-head h2{font-size:17px;margin:0}
.tyotila #kal-valinnat-close{width:44px;height:44px;min-width:44px;min-height:44px;display:grid;place-items:center;padding:10px;border:0;border-radius:var(--sade-nappi);background:var(--toissa);color:var(--text);flex:none}
.tyotila #kal-valinnat-close svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media(max-width:700px){
 .tyotila body:has(#kalenteri-app){height:100dvh;overflow:hidden}
 .tyotila body:has(#kalenteri-app)>.topbar{height:56px;min-height:56px;flex-wrap:nowrap;padding:6px 12px;gap:12px}
 .tyotila body:has(#kalenteri-app)>.topbar .search{display:none}
 .tyotila body:has(#kalenteri-app)>.topbar .account summary{min-width:44px;min-height:44px;padding:12px 0}
 .tyotila .shell:has(>.kal-sivu){height:calc(100dvh - 56px);min-height:0;padding-bottom:calc(88px + env(safe-area-inset-bottom,0px));overflow:hidden}
 .tyotila .shell:has(>.kal-sivu)>main{width:100%;overflow:hidden}
 .tyotila .kal-sivu{display:contents}
 .tyotila .kal-sivu>.kal-taitto{display:none}
 .tyotila #kal-valinnat-dialog[open]{position:fixed;inset:auto 0 0;width:100%;max-width:100%;max-height:calc(100dvh - 24px);margin:0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain}
 .tyotila #kal-valinnat-dialog .kal-valinnat-head{position:sticky;top:-16px;background:var(--surface);z-index:1;padding-block:4px}
 .tyotila #kal-valinnat-dialog button{margin:0}
 .tyotila #kal-valinnat-dialog .kal-mini{max-width:336px;margin:8px auto}
 .tyotila #kal-valinnat-dialog :is(.kal-mini-paiva,.kal-mini-vp){min-width:44px;min-height:44px}
 .tyotila #kal-valinnat-dialog .kal-mini-ruudut{grid-template-columns:repeat(7,minmax(44px,1fr))}
 .tyotila #kal-valinnat-dialog h3{display:block}
 .tyotila #kal-valinnat-dialog #kal-tanaan-lista,.tyotila #kal-valinnat-dialog #kal-yhteys{display:block}
 .tyotila #kal-valinnat-dialog a{display:flex;align-items:center;min-height:44px;min-width:44px}
 #kalenteri-app{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:44px 44px auto minmax(0,1fr) auto;gap:6px;padding:6px 12px 4px;overflow:hidden;--kal-aikaleveys:48px}
 #kalenteri-app .kal-sivu-paa,#kalenteri-app .kal-tyokalut{display:contents}
 #kalenteri-app .kal-sivu-paa>div{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 #kalenteri-app .kal-sivu-paa [data-kal=sync]{display:none}
 #kalenteri-app .kal-otsikko{grid-column:1;grid-row:1;align-self:center;min-width:0}
 #kalenteri-app .kal-otsikko h2{font-size:11px;line-height:1.35;overflow-wrap:anywhere}
 #kalenteri-app .kal-sivu-paa #kal-new-meeting{grid-column:2;grid-row:1;padding:0 7px;gap:3px;font-size:11px;height:44px;white-space:nowrap}
 #kalenteri-app #kal-new-meeting svg{width:16px;height:16px;flex:none}
 #kalenteri-app .kal-siirto{grid-column:3;grid-row:1;gap:0;padding:0;height:44px}
 #kalenteri-app .kal-siirto button{padding:0;font-size:10px;min-width:44px;height:44px}
 #kalenteri-app .kal-nakymat{grid-column:1/-1;grid-row:2;width:calc(100% - 96px);padding:0;border:0;height:44px;gap:0;align-self:start}
 #kalenteri-app .kal-nakymat button{min-width:44px;min-height:44px;height:44px;padding:0 5px;font-size:11px;border-radius:var(--sade-nappi)}
 #kalenteri-app .kal-mobile-actions{grid-column:1/-1;grid-row:2;justify-self:end;display:flex;gap:4px}
 #kalenteri-app .kal-mobile-actions button{display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:var(--sade-nappi);background:var(--surface);color:var(--text)}
 #kalenteri-app .kal-mobile-actions svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 #kalenteri-app .kal-haku{display:none;grid-column:1/-1;grid-row:3;min-width:0}
 #kalenteri-app.kal-search-open .kal-haku{display:flex}
 #kalenteri-app .kal-haku input{min-width:0;min-height:44px;font-size:16px}
 #kalenteri-app .kal-tilarivi{grid-column:1/-1;grid-row:5}
 #kalenteri-app .kal-nakyma{grid-column:1/-1;grid-row:4;min-height:0;flex-shrink:1;display:block;overflow:auto;overscroll-behavior:contain}
 #kalenteri-app .kal-ruudukko{display:block;min-height:0;overflow:visible}
 #kalenteri-app[data-nakyma=viikko] .kal-ruudukko{overflow:visible}
 #kalenteri-app .kal-vieritys{height:auto;max-height:none;min-height:0;overflow:visible;scrollbar-gutter:auto}
 #kalenteri-app .kal-paaotsikko{min-height:44px;height:44px}
 #kalenteri-app .kal-paaotsikot{position:sticky;top:0;z-index:4}
 #kalenteri-app .kal-kokopaiva{min-height:32px}
 #kalenteri-app .kal-kokopaiva:has(.kal-tapahtuma){max-height:none}
 #kalenteri-app .kal-sarake{padding-bottom:44px;box-sizing:content-box}
}