:root {
  --ink: #223c36;
  --green: #215649;
  --green-dark: #153b33;
  --muted: #7b8984;
  --line: #e5eae6;
  --cream: #f6f8f4;
  --accent: #dceba7;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  font-size: 14px;
}

button, input, textarea {
  font: inherit;
}

button {
  cursor: pointer;
  transition: background .15s;
}

button:disabled {
  cursor: wait;
  opacity: .5;
}

button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid #9aba80;
  outline-offset: 2px;
}

input, textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #dce3dd;
  background: #fff;
  border-radius: 9px;
  color: var(--ink);
}

textarea {
  resize: vertical;
  line-height: 1.7;
}

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 20px 0 0;
}

label input, label textarea {
  margin-top: 8px;
}

h1, h2, p {
  margin-top: 0;
}

button {
  border: 0;
  border-radius: 9px;
}

.primary {
  background: var(--green);
  color: #fff;
  padding: 13px 21px;
  font-weight: 650;
}

.primary:hover {
  background: #153e32;
}

.secondary {
  background: #edf2e6;
  color: var(--green);
  padding: 12px;
  width: 100%;
}

.link {
  background: none;
  color: var(--green);
  padding: 13px 8px;
}

.icon {
  background: none;
  color: inherit;
  font-size: 23px;
  padding: 4px 9px;
}

.muted {
  color: var(--muted);
  line-height: 1.8;
}

.small {
  font-size: 12px;
  line-height: 1.8;
}

.error {
  color: #a23232;
  min-height: 16px;
  font-size: 13px;
  margin: 12px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 750;
  font-size: 20px;
  letter-spacing: -.5px;
  white-space: nowrap;
}

.brand>span:last-child {
  font-size: 14px;
  font-weight: 400;
  opacity: .65;
  letter-spacing: 0;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  background: var(--accent);
  color: var(--green-dark);
  width: 33px;
  height: 33px;
  border-radius: 10px;
  font-size: 23px;
  font-weight: 900;
}

.auth-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.auth-story {
  background: var(--green-dark);
  color: #fff;
  padding: 50px 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100dvh;
  background-image: radial-gradient(ellipse at 5% 90%,#315d47 0,transparent 55%);
}

.auth-story h1 {
  font-size: clamp(32px,4vw,60px);
  font-weight: 550;
  line-height: 1.35;
  letter-spacing: -2.5px;
  margin: 22px 0;
}

.auth-story p {
  line-height: 1.9;
  opacity: .75;
}

.eyebrow {
  letter-spacing: 2px;
  font-size: 11px;
  font-weight: 600;
}

.story-line {
  width: 80px;
  height: 2px;
  background: var(--accent);
  margin: 35px 0;
}

.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.auth-card {
  width: 100%;
  max-width: 365px;
}

.auth-card h2 {
  font-size: 27px;
  letter-spacing: -1px;
  margin: 22px 0 10px;
}

.pill {
  background: #ecf2e4;
  color: var(--green);
  padding: 7px 11px;
  border-radius: 30px;
  font-size: 11px;
}

.auth-card>.primary {
  width: 100%;
  margin: 3px 0 8px;
}

.auth-card>.link {
  width: 100%;
}

.auth-card>.small {
  text-align: center;
  margin-top: 24px;
}

#workspace {
  height: 100dvh;
  display: grid;
  grid-template-columns: 264px minmax(0,1fr) 260px;
}

#sidebar {
  background: var(--cream);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 28px 18px 0;
  min-height: 0;
}

#sidebar .brand {
  padding: 0 8px;
}

.workspace-label {
  margin: 25px 8px 26px;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 7px;
}

.dot {
  width: 6px;
  height: 6px;
  background: #799669;
  border-radius: 50%;
}

.section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: .7px;
  color: var(--muted);
  font-weight: 650;
  margin: 0 8px 10px;
}

.search-label {
  margin: 0 0 15px;
}

.search-label input {
  background: #fff;
  font-size: 12px;
  padding: 10px 12px;
  margin: 0;
}

#rooms {
  overflow: auto;
  flex: 1;
}

.room {
  width: 100%;
  text-align: left;
  background: none;
  color: #60736c;
  padding: 13px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 3px 0;
}

.room:hover {
  background: #e9efe3;
}

.room.active {
  background: #dfebd4;
  color: #244b39;
  font-weight: 650;
}

.hash {
  font-size: 21px;
  opacity: .6;
}

.room-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
}

.room small {
  font-size: 10px;
}

.sidebar-bottom>p {
  font-size: 10px;
  color: #98a197;
  text-align: center;
  margin: 20px 0;
}

.profile {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px -18px 0;
  padding: 20px 22px;
  border-top: 1px solid var(--line);
}

.profile>div {
  flex: 1;
  min-width: 0;
}

.profile strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.profile small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: #dce6d2;
  color: #547348;
  display: grid;
  place-items: center;
  font-size: 12px;
  flex-shrink: 0;
}

#chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.chat-header {
  height: 87px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 30px;
  gap: 14px;
}

.room-symbol {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-size: 25px;
  background: #f0f4eb;
  border: 1px solid #e5ebdd;
  border-radius: 12px;
  color: #748862;
}

.header-name {
  flex: 1;
  min-width: 0;
}

.header-name h1 {
  font-size: 16px;
  margin: 0 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-name p {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.connection {
  font-size: 10px;
  color: #778b64;
  white-space: nowrap;
}

.connection::before {
  content: '●';
  margin-right: 5px;
  font-size: 8px;
}

#welcome {
  margin: auto;
  text-align: center;
  padding: 35px;
  color: var(--muted);
}

#welcome h2 {
  font-size: 23px;
  color: var(--ink);
  font-weight: 550;
  margin: 18px 0;
}

#welcome p {
  line-height: 1.9;
  font-size: 13px;
}

.welcome-symbol {
  font-size: 72px;
  color: #98b077;
  margin-bottom: 35px;
}

#conversation {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

#message-scroll {
  flex: 1;
  overflow: auto;
  padding: 26px 32px;
  overscroll-behavior: contain;
}

#older {
  display: block;
  margin: 0 auto 20px;
  font-size: 12px;
}

.day {
  text-align: center;
  font-size: 10px;
  color: #9aa397;
  margin: 12px 0 30px;
}

.message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 22px;
}

.message-body {
  max-width: 82%;
  min-width: 0;
}

.message-meta {
  font-size: 11px;
  margin: 0 0 7px;
  font-weight: 600;
}

.message-meta time {
  color: #a3aba4;
  font-size: 10px;
  font-weight: 400;
  margin-left: 9px;
}

.bubble {
  padding: 12px 15px;
  background: #f3f5f0;
  border: 1px solid #edf0e9;
  border-radius: 0 13px 13px;
  line-height: 1.8;
  font-size: 13px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message.mine {
  flex-direction: row-reverse;
}

.mine .message-meta {
  text-align: right;
}

.mine .bubble {
  background: #eaf2dc;
  border-color: #e0eacb;
  border-radius: 13px 0 13px 13px;
}

.mine .avatar {
  background: #285548;
  color: white;
}

#composer {
  margin: 10px 28px 0;
  border: 1px solid #dce4d5;
  border-radius: 13px;
  box-shadow: 0 3px 9px #152e2005;
  padding: 13px 15px;
}

#composer textarea {
  border: 0;
  padding: 0;
  background: none;
  resize: none;
  outline: none;
  min-height: 54px;
  font-size: 13px;
  max-height: 160px;
}

.composer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.composer-bottom>span {
  font-size: 10px;
  color: #9aa493;
}

.composer-bottom>div {
  display: flex;
  gap: 12px;
  align-items: center;
}

.composer-bottom small {
  font-size: 10px;
  color: #9aa493;
}

.composer-bottom .primary {
  padding: 8px 17px;
  font-size: 12px;
}

.chat-footnote {
  text-align: center;
  font-size: 9px;
  color: #a8b0a5;
  margin: 12px 0 17px;
}

#join-banner {
  padding: 22px;
  text-align: center;
  background: var(--cream);
  font-size: 13px;
}

#info {
  background: #fbfcf9;
  border-left: 1px solid var(--line);
  padding: 27px 23px;
  overflow: auto;
}

#info .section-label {
  margin: 0 0 24px;
}

.info-symbol {
  margin-top: 22px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #eaf0e1;
  color: #7b9167;
  font-size: 30px;
}

#info h2 {
  font-size: 17px;
  margin: 20px 0 10px;
  overflow-wrap: anywhere;
}

#info-description {
  font-size: 12px;
  line-height: 1.9;
  color: var(--muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.info-divider {
  height: 1px;
  background: var(--line);
  margin: 28px 0;
}

.member {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.member .avatar {
  width: 30px;
  height: 30px;
  font-size: 10px;
}

.info-note {
  margin-top: 35px;
  padding: 15px;
  background: #f0f4e9;
  border-radius: 10px;
  font-size: 11px;
  color: #78866d;
}

.info-note strong {
  font-weight: 600;
  color: #5e7550;
}

.info-note p {
  margin: 8px 0 0;
  line-height: 1.8;
}

dialog {
  border: 1px solid var(--line);
  border-radius: 18px;
  width: min(460px,calc(100% - 28px));
  padding: 27px;
  color: var(--ink);
  box-shadow: 0 20px 100px #16351e30;
}

dialog::backdrop {
  background: #0c20184d;
  backdrop-filter: blur(3px);
}

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dialog-head h2 {
  font-size: 21px;
  margin: 0;
}

dialog p {
  font-size: 12px;
  line-height: 1.8;
}

dialog .primary {
  width: 100%;
}

#toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: #203d34;
  color: white;
  padding: 14px 22px;
  border-radius: 10px;
  max-width: 90vw;
  font-size: 13px;
  z-index: 100;
}

.mobile {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}

[hidden] {
  display: none!important;
}

@media(max-width:1200px) {
  #workspace {
    grid-template-columns: 240px minmax(0,1fr);
  }
  #info {
    display: none;
  }
  #info.open {
    display: block;
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    z-index: 20;
    box-shadow: -8px 0 40px #203d3420;
  }
}

@media(max-width:700px) {
  .auth-shell {
    grid-template-columns: 1fr;
  }
  .auth-story {
    min-height: auto;
    padding: 25px;
  }
  .auth-story>div:nth-child(2), .auth-story>span {
    display: none;
  }
  .auth-panel {
    padding: 35px 25px;
  }
  .auth-card h2 {
    font-size: 24px;
  }
  #workspace {
    grid-template-columns: minmax(0,1fr);
  }
  #sidebar {
    display: none;
  }
  #sidebar.open {
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    z-index: 25;
    box-shadow: 10px 0 60px #183b3240;
  }
  .mobile {
    display: block;
  }
  .chat-header {
    height: 73px;
    padding: 0 12px;
    gap: 8px;
  }
  .room-symbol {
    display: none;
  }
  .header-name h1 {
    font-size: 15px;
  }
  .header-name p {
    max-width: 180px;
    font-size: 10px;
  }
  .connection {
    font-size: 9px;
  }
  #message-scroll {
    padding: 16px 14px;
  }
  .message-body {
    max-width: 85%;
  }
  .message .avatar {
    width: 27px;
    height: 27px;
    font-size: 10px;
  }
  .message {
    gap: 7px;
  }
  #composer {
    margin: 8px 12px 0;
    padding: 12px;
  }
  .composer-bottom>span {
    font-size: 8px;
  }
  .composer-bottom small {
    display: none;
  }
  .bubble {
    font-size: 13px;
    padding: 10px 12px;
  }
  #welcome h2 {
    font-size: 20px;
  }
  .chat-footnote {
    margin-bottom: 10px;
  }
}

@media(min-width:1201px) {
  #workspace.info-closed {
    grid-template-columns: 264px minmax(0,1fr);
  }
  #workspace.info-closed #info {
    display: none;
  }
}

.people-chip {
  background: #edf2e6;
  color: #536f47;
  font-size: 10px;
  padding: 8px 10px;
  white-space: nowrap;
}

.member-detail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.member-detail strong {
  font-weight: 600;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.member-detail small {
  font-size: 10px;
  color: #9aa396;
}

.member-detail .viewing {
  color: #32705c;
}

.member-detail .online {
  color: #788958;
}

.viewing::before, .online::before, .offline::before {
  content: '●';
  font-size: 7px;
  margin-right: 5px;
}

.offline::before {
  color: #bcc4b9;
}

#presence-help {
  font-size: 10px;
  line-height: 1.8;
  margin-top: -12px;
  margin-bottom: 20px;
}

.ai-empty {
  font-size: 12px;
  color: #87917e;
  line-height: 1.8;
}

.ai-avatar {
  background: #e4e1f2;
  color: #776791;
}

.ai-person {
  padding: 12px;
  border: 1px solid #e4e2ee;
  border-radius: 12px;
  background: #faf9fd;
}

.ai-person small {
  color: #9a86ae;
}

#ai-settings {
  padding: 4px;
  font-size: 11px;
}

#ai-permissions {
  font-size: 10px;
}

#ai-dialog {
  max-height: 90dvh;
  overflow: auto;
  width: min(490px,calc(100% - 28px));
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 6px;
}

.check-row input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--green);
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

fieldset:disabled {
  opacity: .5;
}

.field-hint {
  font-size: 10px;
  color: var(--muted);
  margin: 6px 0 0;
}

select {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid #dce3dd;
  border-radius: 9px;
  color: var(--ink);
  background: white;
  font: inherit;
}

.connection-note {
  padding: 13px;
  background: #f4f1e8;
  border-radius: 10px;
  margin-top: 20px;
  font-size: 12px;
}

.connection-note p {
  margin: 6px 0 0;
  color: #8a8065;
  font-size: 11px;
  line-height: 1.7;
}

@media(max-width:1000px) {
  .connection {
    display: none;
  }
}

@media(max-width:700px) {
  .people-chip {
    font-size: 9px;
    max-width: 92px;
    white-space: normal;
    line-height: 1.5;
    padding: 6px;
  }
  .header-name p {
    max-width: 155px;
  }
  #info {
    width: min(310px,100vw)!important;
  }
  #ai-dialog {
    padding: 20px;
  }
  .header-name {
    flex-basis: 80px;
  }
}

.staff-button {
  margin-top: 8px;
}

#staff-dialog {
  max-height: 90dvh;
  overflow: auto;
  width: min(560px,calc(100% - 28px));
}

.staff-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.staff-row .member-detail {
  flex: 1;
}

.staff-row.inactive {
  opacity: .55;
}

.staff-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.staff-actions button {
  font-size: 11px;
  padding: 7px 10px;
  background: #edf2e6;
  color: var(--green);
}

.staff-actions .danger {
  background: #f7e7e3;
  color: #9b3b2a;
}

#temp-password-box {
  margin-top: 16px;
}

/* Attachments: composer tray */
.composer-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.attach {
  background: #edf2e6;
  color: var(--green);
  width: 34px;
  height: 34px;
  border-radius: 9px;
  font-size: 16px;
  padding: 0;
}

.attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px 0;
}

.pending-file {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  background: #f3f6ef;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 12px;
}

.pending-file img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
}

.pending-file .name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pending-file small {
  color: var(--muted);
}

.pending-file.error small {
  color: #9b3b2a;
}

.pending-file button {
  background: none;
  color: var(--muted);
  padding: 2px 4px;
}

#conversation.dragging {
  outline: 3px dashed #9aba80;
  outline-offset: -8px;
}

/* Attachments: in messages */
.message-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.message.mine .message-files {
  justify-content: flex-end;
}

.message-files img {
  display: block;
  max-width: min(280px, 70vw);
  max-height: 280px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #f3f6ef;
}

.message-files video {
  display: block;
  width: min(360px, 75vw);
  max-height: 360px;
  border-radius: 12px;
  background: #000;
}

.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(320px, 75vw);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
}

.file-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-chip small {
  color: var(--muted);
  flex: none;
}

.media-prefs {
  margin: 14px 0 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.media-prefs .check-row {
  justify-content: space-between;
  margin: 8px 0 0;
}

.media-prefs select {
  max-width: 70%;
}

/* ---------- Room list: previews, badges ---------- */
.section-buttons {
  display: flex;
  gap: 4px;
}

.room {
  align-items: flex-start;
}

.room .room-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.room .room-preview {
  font-size: 11px;
  font-weight: 400;
  color: #8a968f;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.room .room-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: none;
}

.room .room-time {
  font-size: 10px;
  color: #a3aba4;
}

.badge {
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 10px;
  background: #e0533d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

.badge.mention::before {
  content: '@ ';
}

.room .muted-icon {
  font-size: 10px;
  opacity: .6;
}

.room .dm-avatar {
  width: 24px;
  height: 24px;
  font-size: 10px;
  flex: none;
}

/* ---------- Pinned notice bar ---------- */
.pin-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 28px 0;
  padding: 10px 14px;
  border: 1px solid #e3e9d6;
  background: #f8faf2;
  border-radius: 12px;
  font-size: 12px;
}

.pin-bar .pin-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.pin-bar button {
  flex: none;
  font-size: 11px;
  padding: 6px 10px;
  background: #edf2e6;
  color: var(--green);
}

.pin-bar button.done {
  background: none;
  color: var(--muted);
}

/* ---------- Messages: reply, reactions, receipts, tools ---------- */
.message {
  position: relative;
}

.message.flash .bubble {
  box-shadow: 0 0 0 3px #d9e8b3;
}

.reply-quote {
  display: block;
  margin: 0 0 6px;
  padding: 6px 10px;
  border-left: 3px solid #9aba80;
  background: #f6f8f2;
  border-radius: 6px;
  font-size: 11px;
  color: #6b7a73;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 420px;
}

.mine .reply-quote {
  margin-left: auto;
}

.mention-chip {
  color: #2d6b4f;
  font-weight: 700;
  background: #e2efd6;
  border-radius: 4px;
  padding: 0 2px;
}

.mention-chip.me {
  background: #ffe8a8;
  color: #6b4b00;
}

.edited-mark {
  color: #a3aba4;
  font-size: 10px;
  margin-left: 6px;
  font-weight: 400;
}

.deleted .bubble {
  color: #a3aba4;
  font-style: italic;
  background: none;
}

.reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.mine .reactions {
  justify-content: flex-end;
}

.reaction {
  font-size: 12px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
}

.reaction.mine {
  background: #eaf2dc;
  border-color: #b9d39a;
}

.bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.mine .bubble-row {
  flex-direction: row-reverse;
}

.unread-count {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  color: #d9a400;
  background: none;
  padding: 0;
  cursor: pointer;
}

.msg-tools {
  position: absolute;
  top: -14px;
  right: 40px;
  display: none;
  gap: 2px;
  padding: 2px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 4px 14px #152e2014;
  z-index: 3;
}

.message:not(.mine) .msg-tools {
  right: auto;
  left: 48px;
}

.message:hover .msg-tools,
.message.tools-open .msg-tools {
  display: flex;
}

.msg-tools button {
  background: none;
  padding: 4px 7px;
  font-size: 13px;
  border-radius: 7px;
}

.msg-tools button:hover {
  background: #eef3e8;
}

.reaction-picker {
  position: fixed;
  z-index: 50;
  display: flex;
  gap: 2px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 24px #152e2024;
}

.reaction-picker button {
  font-size: 18px;
  background: none;
  padding: 4px 6px;
}

/* ---------- Composer: reply/edit bar, mention suggestions ---------- */
#composer {
  position: relative;
}

.compose-context {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 8px;
  padding: 6px 10px;
  border-left: 3px solid #9aba80;
  background: #f6f8f2;
  border-radius: 6px;
  font-size: 12px;
  color: #5d6d66;
}

.compose-context span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.compose-context button {
  background: none;
  color: var(--muted);
  padding: 2px 6px;
}

.mention-box {
  position: absolute;
  left: 12px;
  bottom: 100%;
  margin-bottom: 6px;
  min-width: 220px;
  max-height: 240px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px #152e2024;
  z-index: 5;
}

.mention-box button {
  display: flex;
  width: 100%;
  gap: 8px;
  align-items: center;
  background: none;
  color: var(--ink);
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
}

.mention-box button.active,
.mention-box button:hover {
  background: #eef3e8;
}

.mention-box small {
  color: var(--muted);
}

/* ---------- Info panel actions, pickers, lists ---------- */
.room-actions {
  margin: 12px 0 4px;
}

.room-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.secondary.small,
.link.small {
  width: auto;
  font-size: 11px;
  padding: 7px 10px;
}

.picker {
  max-height: 320px;
  overflow: auto;
  margin: 10px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.picker label,
.picker button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  background: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  text-align: left;
}

.picker label:last-child,
.picker button:last-child {
  border-bottom: 0;
}

.picker input {
  width: auto;
  margin: 0;
}

.picker .avatar {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

.member.clickable {
  cursor: pointer;
  border-radius: 8px;
}

.member.clickable:hover {
  background: #f2f6ee;
}

.search-results {
  max-height: 60dvh;
  overflow: auto;
  margin-top: 8px;
}

.search-hit {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  color: var(--ink);
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.search-hit small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 3px;
}

.search-hit mark {
  background: #ffe8a8;
  border-radius: 2px;
}

#search-dialog,
#files-dialog,
#pins-dialog {
  width: min(620px, calc(100% - 28px));
  max-height: 88dvh;
  overflow: auto;
}

.tabs {
  display: flex;
  gap: 6px;
  margin: 12px 0;
}

.tab {
  background: #f1f4ed;
  color: var(--muted);
  padding: 7px 14px;
  font-size: 12px;
}

.tab.active {
  background: var(--green);
  color: #fff;
}

.files-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

.files-list.list {
  display: flex;
  flex-direction: column;
}

.files-list img,
.files-list video {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  background: #f3f6ef;
  display: block;
}

.pin-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.pin-item small {
  display: block;
  color: var(--muted);
  margin-bottom: 4px;
}

.pin-item .pin-content {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pin-item .pin-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}

#readers-list p {
  margin: 6px 0;
  font-size: 13px;
}

@media (max-width: 700px) {
  .pin-bar {
    margin: 8px 12px 0;
  }

  .msg-tools {
    top: auto;
    bottom: -18px;
  }
}

/* ---------- Work: sidebar section, dialogs ---------- */
.work-label {
  margin-top: 14px;
}

.work-buttons {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.work-button {
  background: none;
  color: #60736c;
  text-align: left;
  padding: 9px 12px;
  font-size: 13px;
}

.work-button:hover {
  background: #e9efe3;
}

dialog.wide-dialog {
  width: min(900px, calc(100% - 24px));
  max-height: 92dvh;
  overflow: auto;
}

.cal-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.cal-toolbar .spacer {
  flex: 1;
}

.cal-toolbar input[type=month] {
  width: auto;
  margin: 0;
}

.primary.small {
  width: auto;
  font-size: 12px;
  padding: 8px 12px;
}

.button-link {
  display: inline-block;
  text-decoration: none;
  border-radius: 9px;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.cal-grid .dow {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  padding: 6px 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #f8faf5;
}

.cal-day {
  min-height: 82px;
  padding: 4px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  text-align: left;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.cal-day.other {
  background: #fafbf8;
  color: #b3bbb5;
}

.cal-day.today .num {
  background: var(--green);
  color: #fff;
  border-radius: 10px;
  padding: 0 6px;
}

.cal-day.selected {
  box-shadow: inset 0 0 0 2px #9aba80;
}

.cal-day .num {
  font-size: 11px;
  font-weight: 700;
  align-self: flex-start;
}

.cal-day .sun {
  color: #c2412d;
}

.cal-chip {
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 4px;
  background: #e2efd6;
  color: #2d5a45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-chip.personal {
  background: #e6e9f7;
  color: #34407a;
}

.cal-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 14px;
}

.list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.list-item .grow {
  flex: 1;
  min-width: 0;
}

.list-item small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.list-item button {
  flex: none;
  font-size: 11px;
  padding: 5px 9px;
  background: #edf2e6;
  color: var(--green);
}

.form-row {
  display: flex;
  gap: 10px;
}

.form-row > label {
  flex: 1;
  min-width: 0;
}

.form-row .time-field {
  flex: 0 0 110px;
}

.dialog-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.dialog-actions .primary {
  flex: 1;
}

.danger-text {
  color: #9b3b2a;
}

.announce-box {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8faf5;
}

.announce-box .secondary {
  width: auto;
}

.ai-tools {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.ai-tools .check-row {
  margin: 6px 0;
}

.receipt-summary {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  margin: 6px 0 10px;
}

.receipt-summary strong {
  font-size: 15px;
}

.receipt-list .warn {
  color: #b7791f;
}

.family-kind {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  background: #f1f4ed;
}

.family-kind.부고 {
  background: #2e3532;
  color: #fff;
}

/* ---------- AI proposal cards ---------- */
.ai-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  max-width: 460px;
}

.ai-action {
  border: 1px solid #d9e5c9;
  background: #fbfdf7;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12px;
}

.ai-action .status {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
}

.ai-action .buttons {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.ai-action .buttons button {
  font-size: 11px;
  padding: 6px 12px;
  background: #edf2e6;
  color: var(--green);
}

.ai-action .buttons button.go {
  background: var(--green);
  color: #fff;
}

.ai-action.confirmed {
  border-color: #b9d39a;
}

.ai-action.cancelled,
.ai-action.undone {
  opacity: .6;
}

@media (max-width: 700px) {
  .cal-day {
    min-height: 54px;
  }

  .cal-chip {
    font-size: 9px;
  }

  .cal-bottom {
    grid-template-columns: 1fr;
  }

  .form-row {
    flex-wrap: wrap;
  }
}

/* ---------- Polls ---------- */
.poll {
  margin-top: 8px;
  padding: 12px;
  width: min(360px, 75vw);
  border: 1px solid #d9e5c9;
  border-radius: 14px;
  background: #fbfdf7;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mine .poll {
  margin-left: auto;
}

.poll-question {
  font-size: 13px;
  margin-bottom: 2px;
}

.poll-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  text-align: left;
  overflow: hidden;
}

.poll-option.mine {
  border-color: #8fb56c;
  font-weight: 700;
}

.poll-option:disabled {
  cursor: default;
  opacity: 1;
}

.poll-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: #e8f1dc;
  z-index: 0;
}

.poll-text,
.poll-count {
  position: relative;
  z-index: 1;
}

.poll-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
}

.poll-foot button {
  font-size: 11px;
  padding: 5px 9px;
  background: #edf2e6;
  color: var(--green);
}

.poll-options-edit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.poll-options-edit input {
  margin: 0;
}

/* Approval requests (결재) */
.work-button .badge {
  margin-left: 6px;
  display: inline-block;
}

.approval {
  margin-top: 8px;
  padding: 12px;
  width: min(380px, 78vw);
  border: 1px solid #d9e5c9;
  border-left: 4px solid #8fb56c;
  border-radius: 14px;
  background: #fbfdf7;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.mine .approval {
  margin-left: auto;
}

.approval.rejected {
  border-left-color: #e0533d;
}

.approval.cancelled {
  border-left-color: #b8c2bd;
  opacity: .75;
}

.approval-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.approval-kind {
  padding: 2px 8px;
  border-radius: 8px;
  background: #e8f1dc;
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
}

.approval-status {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.approval.pending .approval-status {
  color: #b7791f;
}

.approval.approved .approval-status {
  color: var(--green);
}

.approval.rejected .approval-status {
  color: #e0533d;
}

.approval-amount {
  font-size: 16px;
  font-weight: 800;
}

.approval-detail {
  white-space: pre-wrap;
  color: #44524c;
}

.approval-people,
.approval-note {
  font-size: 11px;
  color: var(--muted);
}

.approval-decide {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.approval-decide input {
  flex: 1 1 100%;
  margin: 0;
  font-size: 12px;
}

.approval-decide button {
  flex: 1;
  font-size: 12px;
  padding: 7px 10px;
}

.approval-decide .reject {
  background: #fbe9e6;
  color: #b3412f;
}

.approvals-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.approval-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  font-size: 13px;
}

.approval-row small {
  grid-column: 2 / 4;
  color: var(--muted);
}

/* Forwarding and scheduled messages */
.forwarded-label {
  font-size: 11px;
  color: var(--muted);
  margin: 2px 0;
}

.forward-preview {
  padding: 10px 12px;
  border-radius: 10px;
  background: #f4f7f1;
  font-size: 13px;
  white-space: pre-wrap;
  max-height: 120px;
  overflow: auto;
}

.forward-rooms {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow: auto;
  margin: 8px 0;
}

.forward-rooms label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 4px;
  font-size: 13px;
  margin: 0;
}

.forward-rooms input {
  width: auto;
  margin: 0;
}

.quick-times {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.small-head {
  font-size: 13px;
  margin: 16px 0 6px;
}

.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.schedule-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 12px;
}

.schedule-item span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-item time {
  color: var(--green);
  font-weight: 700;
  white-space: nowrap;
}

/* Phones: the keyboard hint is meaningless on touch and squeezes the send button. */
@media (max-width: 700px) {
  .composer-tools > span:not(.attach-wrap) {
    display: none;
  }

  #send {
    white-space: nowrap;
  }
}

.ask-ai {
  background: #e8f1dc;
}

/* AI skills in the room AI settings */
.ai-skills {
  margin-top: 14px;
}

.ai-skill-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 10px;
}

.skill-group {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 12px;
}

.skill-group > strong {
  display: block;
  margin-bottom: 4px;
  color: var(--green);
}

.skill-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}

.skill-row span {
  flex: 1;
}

.skill-row button {
  padding: 3px 8px;
  font-size: 11px;
}

.skill-add input {
  margin: 0 0 6px;
}

.skill-add-row {
  display: flex;
  gap: 6px;
}

.skill-add-row select {
  flex: 1;
  margin: 0;
}

/* Mobile app navigation and touch-first work screens */
#mobile-nav { display: none; }
.cal-count { display: none; }

@media (max-width: 700px) {
  body { overscroll-behavior: none; }
  #workspace { height: 100dvh; padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  #chat { min-height: 0; }
  .chat-header { height: 60px; min-height: 60px; }
  .chat-header .connection, .chat-header .people-chip { display: none; }
  .chat-header .icon { min-width: 42px; min-height: 42px; padding: 7px; }
  .header-name p { max-width: 145px; }

  #mobile-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    z-index: 45;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(64px + env(safe-area-inset-bottom));
    padding: 5px 8px env(safe-area-inset-bottom);
    background: rgba(255,255,255,.96);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 30px rgba(24,59,50,.08);
    backdrop-filter: blur(14px);
  }
  #mobile-nav button {
    min-height: 52px;
    color: #6f7d78;
    background: transparent;
    font-size: 11px;
    font-weight: 650;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }
  #mobile-nav button span { font-size: 21px; line-height: 1; }
  #mobile-nav button.active { color: var(--green); background: #edf4e8; }

  #sidebar.open { bottom: calc(64px + env(safe-area-inset-bottom)); width: min(88vw, 330px); }
  #sidebar.open .work-button, #sidebar.open .room { min-height: 48px; font-size: 14px; }
  #composer { margin: 6px 8px 4px; padding: 9px; border-radius: 14px; }
  #message-input { min-height: 48px; max-height: 120px; font-size: 16px; padding: 10px 11px; }
  .composer-bottom { align-items: center; gap: 6px; }
  .composer-tools { gap: 2px; overflow-x: auto; scrollbar-width: none; }
  .composer-tools::-webkit-scrollbar { display: none; }
  .composer-tools .attach { min-width: 42px; min-height: 42px; font-size: 20px; }
  #send { min-width: 62px; min-height: 42px; padding: 10px 12px; }
  .composer-bottom>span { display: none; }
  #message-scroll { padding-bottom: 8px; }

  dialog { width: calc(100% - 16px); max-width: none; padding: 20px 16px; border-radius: 18px; }
  dialog .dialog-head { min-height: 45px; }
  dialog .dialog-head .icon { min-width: 44px; min-height: 44px; }
  dialog.wide-dialog {
    width: 100vw;
    height: calc(100dvh - 64px - env(safe-area-inset-bottom));
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 14px 12px 24px;
    top: 0;
    bottom: auto;
  }
  dialog.wide-dialog .dialog-head {
    position: sticky;
    top: -14px;
    z-index: 4;
    margin: -14px -12px 0;
    padding: 12px 14px;
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid var(--line);
  }
  dialog.wide-dialog .dialog-head h2 { font-size: 20px; }

  #calendar-dialog .cal-toolbar {
    display: grid;
    grid-template-columns: 44px minmax(0,1fr) 44px 54px;
    position: sticky;
    top: 58px;
    z-index: 3;
    margin: 0 -12px 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid var(--line);
  }
  #calendar-dialog .cal-toolbar button { min-height: 42px; padding: 8px; }
  #calendar-dialog #cal-title { text-align: center; font-size: 17px; }
  #calendar-dialog .cal-toolbar .spacer { display: none; }
  #calendar-dialog #cal-new-event,
  #calendar-dialog #cal-new-reminder { grid-row: 2; width: 100%; font-size: 14px; }
  #calendar-dialog #cal-new-event { grid-column: 1 / 3; }
  #calendar-dialog #cal-new-reminder { grid-column: 3 / 5; }

  .cal-grid { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); border-right: 0; border-bottom: 0; }
  .cal-grid .dow { font-size: 12px; font-weight: 700; padding: 8px 0; }
  .cal-day { min-height: 52px; padding: 5px 3px; align-items: center; gap: 4px; }
  .cal-day .num { align-self: center; display: grid; place-items: center; min-width: 26px; height: 26px; font-size: 13px; border-radius: 13px; }
  .cal-day.today .num { padding: 0; }
  .cal-day.selected { box-shadow: inset 0 0 0 2px var(--green); background: #f3f8ee; }
  .cal-chip { display: none; }
  .cal-count { display: block; color: var(--green); font-size: 9px; font-weight: 750; line-height: 1; }
  .cal-bottom { gap: 22px; margin-top: 18px; }
  .cal-bottom > div { padding: 14px; border-radius: 14px; background: #f8faf5; }
  .cal-bottom .section-label { color: var(--ink); font-size: 14px; margin: 0 0 8px; }
  .cal-bottom .list-item { min-height: 58px; align-items: center; }
  .cal-bottom .list-item strong { font-size: 14px; }
  .cal-bottom .list-item button { min-width: 52px; min-height: 40px; }

  .form-row .time-field { flex: 1 1 42%; }
  input, textarea, select { font-size: 16px; }
  button { touch-action: manipulation; }
}

.holiday-name {
  font-size: 9px;
  line-height: 1.2;
  color: #c2412d;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (max-width: 700px) {
  .holiday-name { font-size: 8px; text-align: center; width: 100%; }
  .cal-day:has(.holiday-name) { background: #fff9f7; }
}

.google-calendar-link {
  flex: none;
  width: auto;
  padding: 6px 10px;
  background: #eef3fb;
  color: #315b8a;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .google-calendar-link { min-height: 40px; display: inline-flex; align-items: center; padding: 8px 10px; }
  #cal-day-list .list-item { flex-wrap: wrap; }
  #cal-day-list .list-item .grow { flex-basis: calc(100% - 64px); }
}

/* Clean navigation icons, mobile sheets and annual leave */
#workspace { height: var(--app-height, 100dvh); }
.nav-icon { position: relative; display: block; width: 21px; height: 21px; color: currentColor; }
.nav-icon.chat { border: 2px solid currentColor; border-radius: 6px; }
.nav-icon.chat::after { content:""; position:absolute; left:3px; bottom:-5px; width:6px; height:6px; border-left:2px solid currentColor; transform:skewY(-35deg); background:inherit; }
.nav-icon.calendar { border: 2px solid currentColor; border-radius: 4px; }
.nav-icon.calendar::before { content:""; position:absolute; left:-2px; right:-2px; top:4px; border-top:2px solid currentColor; }
.nav-icon.calendar::after { content:""; position:absolute; width:3px; height:3px; border-radius:50%; background:currentColor; left:4px; top:10px; box-shadow:7px 0 currentColor,0 6px currentColor,7px 6px currentColor; }
.nav-icon.leave::before { content:""; position:absolute; width:15px; height:8px; left:3px; top:7px; border:2px solid currentColor; border-radius:50% 50% 45% 45%; transform:rotate(-14deg); }
.nav-icon.leave::after { content:""; position:absolute; height:7px; left:10px; top:1px; border-left:2px solid currentColor; transform:rotate(28deg); }
.nav-icon.receipt { border:2px solid currentColor; border-radius:3px; }
.nav-icon.receipt::after { content:""; position:absolute; left:4px; right:4px; top:5px; height:2px; background:currentColor; box-shadow:0 5px currentColor,0 10px currentColor; }
.nav-icon.more::after { content:"•••"; position:absolute; inset:-7px -5px; font-size:20px; letter-spacing:1px; }
.composer-tools .attach { min-width:auto; min-height:34px; padding:6px 9px; font-size:11px; font-weight:750; color:var(--green); background:#edf2e9; border-radius:8px; }
.cal-chip.leave { background:#f2e8fa; color:#6f3f8e; }
.leave-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; margin:14px 0 20px; }
.leave-card { display:grid; grid-template-columns:1fr auto; align-items:center; gap:7px 12px; padding:14px; border:1px solid var(--line); border-radius:13px; background:#f8faf6; }
.leave-card strong { grid-column:1/-1; font-size:15px; }
.leave-card b { color:var(--green); }
.leave-card .allowance-input { width:90px; padding:8px; margin:0; }
.leave-card button { width:auto; }
.leave-list { display:grid; gap:8px; }

/* Theme variables also cover dialogs and floating menus that formerly stayed white. */
body, #chat, #conversation, dialog { background:var(--surface); }
input, textarea, select, .msg-tools, .reaction-picker, .bubble, .list-item, .leave-card { background-color:var(--surface-raised); color:var(--ink); border-color:var(--line); }
.secondary, .work-button, .composer-tools .attach, #mobile-nav button.active { background:var(--surface-tint); color:var(--green); }
.cal-bottom > div, .cal-day.selected { background:var(--surface-soft); }

@media (max-width:700px) {
  #mobile-nav { grid-template-columns:repeat(5,1fr); }
  #mobile-nav button span { font-size:inherit; }
  dialog:not(.wide-dialog) { width:100%; max-width:none; max-height:90dvh; margin:auto auto 0; border-radius:22px 22px 0 0; transform:translateY(var(--sheet-drag,0)); transition:transform .18s ease; }
  dialog.dragging { transition:none; }
  dialog:not(.wide-dialog) .dialog-head::before { content:""; position:absolute; width:38px; height:4px; border-radius:4px; background:var(--line); top:7px; left:50%; transform:translateX(-50%); }
  dialog:not(.wide-dialog) .dialog-head { position:relative; padding-top:14px; touch-action:none; }
  .leave-summary { grid-template-columns:1fr; }
  .leave-card { padding:12px; }
  html.keyboard-open #mobile-nav { display:none; }
  html.keyboard-open #workspace { padding-bottom:0; }
  html.keyboard-open .chat-header { min-height:45px; height:45px; padding-block:4px; }
  html.keyboard-open .header-name p, html.keyboard-open .chat-footnote, html.keyboard-open .composer-tools { display:none; }
  html.keyboard-open #composer { margin:2px 5px; padding:6px; }
  html.keyboard-open #message-input { min-height:40px; max-height:58px; }
}



@media(max-width:700px) {
  .composer-tools .attach { width:auto; min-width:42px; white-space:nowrap; padding-inline:8px; line-height:1; }
}

/* Full-screen photo viewer keeps the user inside the signed-in app. */
.image-viewer {
  width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0;
  border:0; border-radius:0; background:#07100d; color:#f5faf8;
}
.image-viewer::backdrop { background:#07100d; }
.image-viewer-bar { height:58px; display:flex; align-items:center; gap:10px; padding:8px 12px; background:#111d19; border-bottom:1px solid #30423b; }
.image-viewer-bar strong { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.image-viewer-bar .button-link { width:auto; background:#243730; color:#bde6d2; }
.image-viewer-stage { height:calc(100dvh - 58px); display:grid; place-items:center; overflow:auto; padding:12px; }
.image-viewer-stage img { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }



/* Touch UI: actions use a deliberate long press, and sheets stay above bottom navigation. */
@media(max-width:700px) {
  .message:hover:not(.tools-open) .msg-tools { display:none; }
  .message.tools-open .msg-tools { display:flex; }
  .message { -webkit-touch-callout:none; }
  dialog:not(.wide-dialog):not(.image-viewer) {
    max-height:calc(100dvh - 72px - env(safe-area-inset-bottom));
    margin:auto auto calc(64px + env(safe-area-inset-bottom));
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-bottom:calc(22px + env(safe-area-inset-bottom));
  }
  #account-dialog form { padding-bottom:8px; }
  #account-dialog #save-password { margin-bottom:4px; }
}

/* Mobile drawer stays fully above bottom navigation and can scroll to the account row. */
@media(max-width:700px) {
  #sidebar.open {
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-bottom:16px;
  }
  #sidebar.open #rooms { flex:0 1 auto; max-height:28dvh; min-height:48px; }
  #sidebar.open .sidebar-bottom { flex:none; margin-top:8px; }
  #sidebar.open .profile { margin-bottom:0; }
  .image-viewer-bar .secondary { width:auto; min-width:52px; padding:9px 11px; }
}

/* Per-device typography and accent preferences. */
html[data-font="system"] { --app-font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif; }
html[data-font="clean"] { --app-font:"Helvetica Neue",Arial,"Apple SD Gothic Neo","Noto Sans KR",sans-serif; }
html[data-font="rounded"] { --app-font:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Apple SD Gothic Neo",sans-serif; }
html[data-font="serif"] { --app-font:"Iowan Old Style","AppleMyungjo","Nanum Myeongjo",serif; }
body { font-family:var(--app-font,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif); }
html[data-size="small"] { --chat-font:12px; --ui-font:13px; }
html[data-size="normal"] { --chat-font:13px; --ui-font:14px; }
html[data-size="large"] { --chat-font:15px; --ui-font:15px; }
html[data-size="xlarge"] { --chat-font:17px; --ui-font:16px; }
body { font-size:var(--ui-font,14px); }
.bubble, .poll, .approval, .ai-action { font-size:var(--chat-font,13px); }
#message-input { font-size:max(16px,var(--chat-font,13px)); }
.appearance-prefs .check-row { margin:8px 0 0; justify-content:space-between; }
.appearance-prefs .check-row > span { flex:none; }
.appearance-prefs select { width:min(210px,68%); margin:0; }
.appearance-preview { margin-top:12px; padding:12px 14px; border:1px solid var(--line); border-left:5px solid var(--green); border-radius:10px; background:var(--surface-raised); display:flex; flex-direction:column; gap:5px; font-size:var(--chat-font); }
.appearance-preview span { color:var(--muted); }

/* Readable notice card on phones. */
@media(max-width:700px) {
  .pin-bar { align-items:flex-start; gap:10px; margin:8px 8px 2px; padding:12px; min-height:68px; border-radius:14px; font-size:14px; line-height:1.45; }
  .pin-bar .pin-text { white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; text-overflow:ellipsis; font-weight:650; }
  .pin-bar button { min-height:42px; padding:8px 10px; font-size:11px; line-height:1.3; }
}

/* Font size preference applies to navigation and work screens as well as chat text. */
.room, .work-button, .staff-row, .list-item, .search-hit, .pin-item, .member-detail strong { font-size:var(--ui-font,14px); }
.room .room-preview, .room small, .member-detail small, .profile small, .field-hint, .poll-foot, .ai-action .status { font-size:clamp(10px,calc(var(--ui-font,14px) - 2px),14px); }
.header-name h1, #info-title { font-size:calc(var(--ui-font,14px) + 2px); }
.header-name p, .connection, .section-label, .profile strong { font-size:clamp(11px,calc(var(--ui-font,14px) - 1px),15px); }
dialog, dialog p, dialog label, dialog button, dialog input, dialog select, dialog textarea { font-size:var(--ui-font,14px); }
dialog .small, dialog .field-hint { font-size:clamp(11px,calc(var(--ui-font,14px) - 2px),14px); }
.pin-bar { font-size:var(--ui-font,14px); }
.pin-item .pin-content { font-size:var(--chat-font,13px); line-height:1.65; }
#mobile-nav button { font-size:clamp(11px,calc(var(--ui-font,14px) - 3px),14px); }
.composer-tools .attach { font-size:clamp(11px,calc(var(--ui-font,14px) - 2px),14px); }
@media(max-width:700px) {
  #sidebar.open .room, #sidebar.open .work-button { font-size:var(--ui-font,14px); }
  #sidebar.open .room .room-preview { font-size:clamp(10px,calc(var(--ui-font,14px) - 2px),14px); }
}

/* The whole mobile drawer scrolls; room cards must never be clipped by an inner height limit. */
@media(max-width:700px) {
  #sidebar.open #rooms { flex:none; max-height:none; min-height:0; overflow:visible; }
  #sidebar.open .room { min-height:72px; padding-block:12px; }
  #sidebar.open .room .room-text { gap:5px; }
  #sidebar.open .room .room-preview { line-height:1.45; }
}

/* Compact mobile layout: prioritize conversations over decorative whitespace. */
@media(max-width:700px) {
  .chat-header { height:52px; min-height:52px; padding-inline:9px; }
  .chat-header .icon { min-width:38px; min-height:38px; padding:5px; }
  #message-scroll { padding:10px 10px 4px; }
  .message { margin-bottom:13px; gap:7px; }
  .message-meta { margin-bottom:4px; }
  .day { margin:7px 0 15px; }
  #composer { margin:4px 6px 2px; padding:7px 8px; }
  #message-input { min-height:42px; max-height:96px; padding:7px 8px; }
  .composer-tools .attach { min-height:38px; }
  #send { min-height:38px; }

  #sidebar.open { padding:14px 12px 8px; }
  #sidebar.open .brand { padding:0 5px; font-size:18px; }
  #sidebar.open .workspace-label { margin:11px 6px 15px; }
  #sidebar.open .section-label { margin:0 6px 6px; }
  #sidebar.open .search-label { margin-bottom:8px; }
  #sidebar.open .search-label input { padding:9px 10px; }
  #sidebar.open .room { min-height:62px; padding:9px 10px; margin:2px 0; }
  #sidebar.open .work-label { margin-top:9px; }
  #sidebar.open .work-buttons { gap:2px; }
  #sidebar.open .work-button { min-height:42px; padding:7px 10px; }
  #sidebar.open .sidebar-bottom { margin-top:5px; }
  #sidebar.open .sidebar-bottom > p { display:none; }
  #sidebar.open .sidebar-bottom > .secondary { padding:9px; }
  #sidebar.open .profile { margin:8px -12px 0; padding:11px 14px; }

  dialog:not(.wide-dialog):not(.image-viewer) { padding-top:14px; }
  dialog label { margin-top:13px; }
  .media-prefs { margin-top:10px; padding:10px; }
}

/* Quick navigation for long conversations. */
#conversation { position:relative; }
.scroll-jumps { position:absolute; right:18px; bottom:142px; z-index:12; display:flex; flex-direction:column; gap:7px; pointer-events:none; }
.scroll-jumps.empty { display:none; }
.scroll-jumps button { pointer-events:auto; width:38px; height:38px; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--surface-raised); color:var(--green); font-size:21px; font-weight:750; box-shadow:0 5px 18px #152e2030; }
.scroll-jumps button:hover { background:var(--surface-tint); }
@media(max-width:700px) {
  .scroll-jumps { right:11px; bottom:116px; gap:6px; }
  .scroll-jumps button { width:42px; height:42px; font-size:23px; box-shadow:0 5px 18px #07130f42; }
  html.keyboard-open .scroll-jumps { bottom:68px; }
}

.room-hint {
  margin: 8px 6px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}

/* ======================================================================
   Icons and square corners (대표 요청 2026-09-25: 촌스러운 이모지 → 선 아이콘, 둥근 네모 → 각진 네모)
   Kept last so it wins over the earlier layers.
   ====================================================================== */
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* Icon-only buttons (header, sidebar top, profile) */
button.icon { width: 36px; height: 36px; min-width: 36px; padding: 0; background: transparent; color: var(--muted); font-size: 0; }
button.icon:hover { background: var(--surface-tint, #eef3ea); color: var(--green); }
button.icon .ico { width: 20px; height: 20px; }

/* Composer toolbar: quiet icons, label in the tooltip */
.composer-tools { gap: 2px; align-items: center; }
.composer-tools .attach.tool { width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0; font-size: 0; background: transparent; color: var(--muted); }
.composer-tools .attach.tool:hover { background: var(--surface-tint, #eef3ea); color: var(--green); }
.composer-tools .attach.tool .ico { width: 20px; height: 20px; }
.composer-tools .ask-ai { color: var(--green) !important; }
#send { gap: 6px; }
#send .ico { width: 16px; height: 16px; }

/* Sidebar work menu: icon + label in one line */
.work-button { justify-content: flex-start; gap: 10px; }
.work-button .ico { width: 18px; height: 18px; color: var(--green); }
.work-button .badge { margin-left: auto; }
#invite-button .ico, #staff-button .ico, #info .secondary .ico { width: 16px; height: 16px; }

/* Message tools */
.msg-tools button { display: inline-flex; align-items: center; justify-content: center; }
.msg-tools .ico { width: 16px; height: 16px; }

/* Mobile bottom navigation: icon above the label */
#mobile-nav button[data-icon] { flex-direction: column; gap: 3px; }
#mobile-nav .ico { width: 22px; height: 22px; }

@media (max-width: 700px) {
  .composer-tools .attach.tool, button.icon { width: 42px; height: 42px; min-width: 42px; min-height: 42px; }
  .composer-tools .attach.tool .ico, button.icon .ico { width: 22px; height: 22px; }
}

/* Square corners everywhere; only true dots (status lights, radio buttons) stay round. */
*, *::before, *::after { border-radius: 0 !important; }
.dot, .viewing::before, .online::before, .offline::before, input[type="radio"] { border-radius: 50% !important; }
.room .hash { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.room .hash .ico { width: 18px; height: 18px; }
#room-symbol { display: inline-flex; align-items: center; justify-content: center; }
#room-symbol .ico { width: 22px; height: 22px; }
/* The AI card used fixed light colours and turned into a white box in dark mode. */
.ai-person { background: var(--surface-raised, #faf9fd); border-color: var(--line); }
.ai-person small { color: var(--muted); }

/* Calendar: 월/주/일 views */
.seg { display: inline-flex; border: 1px solid var(--line); }
.seg button { padding: 5px 12px; font-size: 12px; background: transparent; color: var(--muted); border-right: 1px solid var(--line); }
.seg button:last-child { border-right: 0; }
.seg button.active { background: var(--green); color: #fff; }
.cal-day .sat { color: #2f6fb5; }
.cal-grid.view-week .cal-day { min-height: 360px; }
.cal-grid.view-week .cal-day .num { font-size: 12px; }
.cal-grid.view-week .cal-chip { font-size: 11px; white-space: normal; }
.cal-grid.view-day { position: relative; display: block; max-height: 460px; overflow-y: auto; border-right: 1px solid var(--line); }
.cal-day-head { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; background: var(--surface-soft, #f8faf5); border-bottom: 1px solid var(--line); }
.cal-hour { display: grid; grid-template-columns: 64px 1fr; width: 100%; min-height: 40px; padding: 0; background: transparent; color: var(--ink); text-align: left; border-bottom: 1px solid var(--line); }
.cal-hour:hover { background: var(--surface-tint, #f3f7ee); }
.cal-hour-label { padding: 4px 8px; font-size: 11px; color: var(--muted); border-right: 1px solid var(--line); }
.cal-hour-events { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 6px; }
.cal-hour-events .cal-chip { font-size: 12px; padding: 3px 6px; }
.cal-tip { margin: 6px 0 0; }
/* Phones: the month grid shows counts only, but week and day views list their events. */
@media (max-width: 700px) {
  .cal-grid.view-week .cal-chip, .cal-grid.view-day .cal-chip { display: block; }
  .cal-grid.view-week .cal-day { min-height: 300px; padding: 3px 2px; }
  .cal-grid.view-week .cal-chip { font-size: 10px; line-height: 1.3; padding: 2px; word-break: keep-all; overflow-wrap: anywhere; }
  .seg { width: 100%; }
  .seg button { flex: 1; padding: 9px 0; font-size: 13px; }
}
@media (max-width: 700px) { #calendar-dialog #cal-views { grid-column: 1 / -1; } }
/* 1:1 · 새 방: small labelled buttons so they are recognisable without the old emoji */
#sidebar button.labeled { gap: 4px; padding: 5px 8px; font-size: 12px; font-weight: 700; background: var(--surface-tint, #eef3ea); color: var(--green); }
#sidebar button.labeled:hover { background: var(--green); color: #fff; }
#sidebar button.labeled .ico { width: 15px; height: 15px; }
@media (max-width: 700px) { #sidebar button.labeled { padding: 8px 10px; font-size: 13px; } }
.scroll-jumps button { display: inline-flex; align-items: center; justify-content: center; }
.scroll-jumps button[hidden] { display: none; }
.scroll-jumps .ico { width: 20px; height: 20px; }

/* VAC logo (vector, traced from the company logo): black in light mode, white in dark mode. */
:root { --logo: #16180a; }
html[data-theme="dark"] { --logo: #ffffff; }
@media (prefers-color-scheme: dark) { html[data-theme="system"] { --logo: #ffffff; } }
.brand { gap: 10px; }
.brand-logo { height: 24px; width: auto; flex: none; color: var(--logo); }
.auth-story .brand-logo { height: 30px; color: inherit; } /* on the dark green panel, same white as its text */

/* Photo viewer: the whole photo fits the screen (a % max-height inside the grid cell did not limit it). */
.image-viewer-stage { display: flex; align-items: center; justify-content: center; }
.image-viewer-stage img { max-width: 100%; max-height: calc(100dvh - 58px - 24px); }

/* Photos in the chat: a little larger (tall phone screenshots were squeezed into 280px). */
.message-files img { max-width: min(360px, 72vw); max-height: 440px; }
@media (max-width: 700px) { .message-files img { max-width: 72vw; max-height: 380px; } }


/* Leave (연차·휴가) */
.leave-today { margin: 4px 0 10px; padding: 8px 12px; background: var(--surface-tint, #edf4e8); color: var(--green); font-size: 13px; font-weight: 700; }
.leave-pending { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.leave-request { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid #d99a2b; background: var(--surface-raised, #fff); }
.leave-request .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.leave-request small { color: var(--muted); }
.leave-request input { width: 160px; margin: 0; font-size: 12px; }
.leave-balance { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: var(--surface-raised, #fff); }
.leave-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; border-right: 1px solid var(--line); }
.leave-stat:last-child { border-right: 0; }
.leave-stat b { font-size: 22px; }
.leave-stat small { color: var(--muted); font-size: 12px; }
.leave-stat.left b { color: var(--green); }
.leave-bar { display: flex; height: 6px; margin: 6px 0 12px; background: var(--surface-tint, #edf4e8); }
.leave-bar .used { background: var(--green); }
.leave-bar .waiting { background: #d99a2b; }
.leave-table { display: flex; flex-direction: column; border: 1px solid var(--line); margin-bottom: 12px; }
.leave-trow { display: grid; grid-template-columns: 1.2fr 1.4fr 1.4fr .7fr .7fr .7fr; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.leave-trow:last-child { border-bottom: 0; }
.leave-trow.head { font-size: 11px; color: var(--muted); background: var(--surface-soft, #f6f8f4); }
.leave-trow input { margin: 0; padding: 5px 6px; font-size: 12px; }
.leave-days { display: flex; align-items: center; gap: 4px; }
.leave-days input { width: 70px; }
.leave-status { flex: none; padding: 2px 7px; font-size: 11px; font-weight: 700; background: var(--surface-tint, #edf4e8); color: var(--green); }
.leave-status.pending { background: #fdf1d8; color: #9a6400; }
.leave-status.rejected { background: #fbe6e2; color: #b3412f; }
.leave-status.cancelled { color: var(--muted); }
.leave-row.cancelled, .leave-row.rejected { opacity: .65; }
.cal-chip.leave { background: #fdf1d8; color: #7a5200; }
@media (max-width: 700px) {
  .leave-request { flex-wrap: wrap; }
  .leave-request input { width: 100%; }
  .leave-trow { grid-template-columns: 1fr 1fr; }
  .leave-trow.head { display: none; }
}
#leave-dialog .leave-summary { display: block; }
#leave-dialog #leave-year { width: auto; flex: none; margin: 0; }
#leave-dialog .cal-toolbar { flex-wrap: wrap; }

/* Profile photos */
.avatar { position: relative; overflow: hidden; }
.avatar.has-photo { color: transparent; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar.big { width: 64px; height: 64px; font-size: 26px; display: inline-grid; place-items: center; flex: none; }
.profile-photo-row { display: flex; align-items: center; gap: 14px; }
.profile-photo-buttons { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* Attach menu (카메라 · 사진·동영상 · 파일) */
.attach-wrap { position: relative; display: inline-flex; }
.attach-menu { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 30; display: flex; flex-direction: column; min-width: 150px; background: var(--surface-raised, #fff); border: 1px solid var(--line); box-shadow: 0 8px 24px #0f231c33; }
.attach-menu[hidden] { display: none; }
.attach-menu button { justify-content: flex-start; gap: 10px; width: 100%; padding: 11px 14px; background: transparent; color: var(--ink); font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--line); }
.attach-menu button:last-child { border-bottom: 0; }
.attach-menu button:hover { background: var(--surface-tint, #edf4e8); color: var(--green); }
.attach-menu button[hidden] { display: none; }
.attach-menu .ico { color: var(--green); }

/* Composer: every tool on one line, also on phones */
.composer-tools { flex-wrap: nowrap; overflow: visible !important; }
@media (max-width: 700px) {
  .composer-tools .attach.tool { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  .composer-bottom { gap: 6px; }
  #send { padding-inline: 12px; }
}
@media (max-width: 360px) {
  .composer-tools .attach.tool { width: 34px; min-width: 34px; }
}


.archived-link { display: block; margin: 6px 8px 0; color: var(--muted); font-size: 12px; text-align: left; }
.archived-link[hidden] { display: none; }

/* 기기 인증 */
.device-wait { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: var(--surface-soft, #f6f8f4); }
.device-wait[hidden] { display: none; }
.device-card { max-width: 440px; padding: 28px 24px; background: var(--surface-raised, #fff); border: 1px solid var(--line); text-align: center; }
.device-card h2 { margin: 0 0 12px; font-size: 20px; }
.device-card p { line-height: 1.6; }
.device-code { margin: 18px 0 6px; font-size: 40px; font-weight: 800; letter-spacing: 8px; color: var(--green); font-variant-numeric: tabular-nums; }
.my-devices .list-item { padding: 8px 0; }

/* Notification prompt and sound settings */
.notify-ask { display: flex; align-items: center; gap: 10px; margin: 8px 12px 0; padding: 10px 12px; background: var(--surface-tint, #edf4e8); border: 1px solid var(--line); color: var(--ink); font-size: 13px; }
.notify-ask .ico { width: 20px; height: 20px; color: var(--green); flex: none; }
.notify-ask .grow { flex: 1; min-width: 0; }
.alert-prefs { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.alert-prefs .check-row { display: flex; align-items: center; gap: 8px; }
.alert-prefs .check-row > span:first-child { width: 56px; flex: none; }
.alert-prefs select { flex: 1; min-width: 0; margin: 0; }
.alert-prefs input[type="range"] { flex: 1; accent-color: var(--green); }
@media (max-width: 700px) { .notify-ask { flex-wrap: wrap; } .notify-ask .grow { flex-basis: calc(100% - 30px); } }

/* Touch screens: a long press opens the messenger's own menu (복사·답장·전달…), not the phone's text selection,
   Google search bar or image menu. Typing fields stay selectable. */
@media (pointer: coarse) {
  #messages, #rooms, #mobile-nav, .chat-header, .pin-bar, .composer-tools, .scroll-jumps {
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  }
  #messages img, #messages a { -webkit-user-drag: none; }
  #messages input, #messages textarea, #messages select { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
}
/* ⚙ 알림 → the chosen sound as a file for the phone's own notification sound */
.phone-sound { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface-soft); }
.phone-sound ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.5; }
.phone-sound small { line-height: 1.5; }
.phone-sound button .ico { width: 16px; height: 16px; }

/* ======================================================================
   VAC Messenger 디자인 시스템 (2026-09-25, Claude Design 시안 기준)
   ----------------------------------------------------------------------
   이 층이 파일 맨 끝에 있어 위의 옛 규칙들을 덮어씁니다.
   1. 토큰: 밝게/어둡게 × 강조 색상 4종. 옛 이름(--green, --surface…)도 새 값으로 다시 연결.
   2. 글자: Pretendard(설치된 경우) → Apple SD Gothic Neo → Malgun Gothic → Noto Sans KR. 4px 간격 단위.
   3. 컴포넌트: 각진 모서리, 1.8px 선 아이콘, "선택 = 강조색 단색 채움 + 대비 글자".
   본문 대비 4.5:1 이상, 큰 글자·아이콘 3:1 이상 (두 테마 모두 확인).
   ====================================================================== */

/* ---------- 1. 토큰 ---------- */
:root {
  /* 강조 색상 (밝게 / 어둡게 짝) — 기본: VAC 초록 */
  --ac-l: #1e6b52; --ac-soft-l: #e3f0ea; --ac-line-l: #b7d0c8; --ac-hover-l: #1a5b46;
  --ac-d: #6ecba3; --ac-soft-d: #1d3a2f; --ac-line-d: #3b6754; --ac-hover-d: #84d3b1;
}
:root[data-accent="blue"] {
  --ac-l: #2b5fa8; --ac-soft-l: #e6ecf5; --ac-line-l: #bbcce3; --ac-hover-l: #25518f;
  --ac-d: #7fb2f7; --ac-soft-d: #2c3b4a; --ac-line-d: #435c7a; --ac-hover-d: #92bef8;
}
:root[data-accent="purple"] {
  --ac-l: #6c4bb0; --ac-soft-l: #ede9f6; --ac-line-l: #d0c5e6; --ac-hover-l: #5c4096;
  --ac-d: #c0a4f3; --ac-soft-d: #3c374a; --ac-line-d: #605578; --ac-hover-d: #c9b2f5;
}
:root[data-accent="orange"] {
  --ac-l: #a3531a; --ac-soft-l: #f4eae4; --ac-line-l: #e2c8b6; --ac-hover-l: #8b4716;
  --ac-d: #f2a86a; --ac-soft-d: #483829; --ac-line-d: #77573b; --ac-hover-d: #f4b580;
}

/* 밝게 (기본) */
:root {
  --bg: #ffffff;          /* 대화 영역, 페이지 */
  --bg-2: #f4f5f3;        /* 사이드바, 방 정보, 안쪽 구역 */
  --raised: #ffffff;      /* 카드, 입력란, 대화상자, 떠 있는 메뉴 */
  --bubble: #f0f2f0;      /* 상대 말풍선 */
  --bar: #e6e9e6;         /* 투표 막대, 연차 막대 바탕 */
  --hover: rgba(23, 27, 25, .06);
  --line: #e3e6e3;        /* 구분선 */
  --line-strong: #cbd0cc; /* 입력란·보조 버튼 테두리 */
  --ink: #171b19;         /* 본문 */
  --ink-2: #454c49;       /* 보조 본문 */
  --muted: #626b66;       /* 설명 (흰 배경 5.5:1) */
  --ac: var(--ac-l); --ac-fg: #ffffff; --ac-soft: var(--ac-soft-l); --ac-line: var(--ac-line-l); --ac-hover: var(--ac-hover-l);
  --danger: #b3261e; --danger-soft: #fbe9e6;
  --warn: #8a5a00; --warn-soft: #fdf1d8; --warn-bar: #d99a2b;
  --info: #2b5fa8; --info-soft: #e6eef9;
  --badge: #c2412d;       /* @멘션 배지 (흰 글자 5.1:1) */
  --shadow: 0 16px 48px rgba(20, 30, 26, .14);
  --shadow-sm: 0 6px 20px rgba(20, 30, 26, .12);
  --logo: #111111;
  --story: #12312a;       /* 로그인 화면 왼쪽 패널 */
  color-scheme: light;

  /* 옛 층이 쓰는 이름들 → 새 값 */
  --green: var(--ac); --green-dark: var(--ac-hover); --accent: var(--ac-soft); --cream: var(--bg-2);
  --surface: var(--bg); --surface-soft: var(--bg-2); --surface-raised: var(--raised); --surface-tint: var(--ac-soft);
  --sel-bg: var(--ac); --sel-fg: var(--ac-fg); --sel-soft: var(--ac-soft);
}

/* 어둡게 */
:root[data-theme="dark"] {
  --bg: #121514; --bg-2: #181c1a; --raised: #1f2422; --bubble: #232926; --bar: #2f3633;
  --hover: rgba(233, 236, 234, .07);
  --line: #2b312e; --line-strong: #3b433f;
  --ink: #e9ecea; --ink-2: #b9c0bc; --muted: #98a19c;
  --ac: var(--ac-d); --ac-fg: #0c1611; --ac-soft: var(--ac-soft-d); --ac-line: var(--ac-line-d); --ac-hover: var(--ac-hover-d);
  --danger: #ff8f7a; --danger-soft: #4a221b;
  --warn: #ffd98a; --warn-soft: #4a3a14; --warn-bar: #d99a2b;
  --info: #7fb2f7; --info-soft: #1e3050;
  --badge: #d9432f;
  --shadow: 0 16px 48px rgba(0, 0, 0, .55);
  --shadow-sm: 0 6px 20px rgba(0, 0, 0, .45);
  --logo: #ffffff;
  --story: #0f2620;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --bg: #121514; --bg-2: #181c1a; --raised: #1f2422; --bubble: #232926; --bar: #2f3633;
    --hover: rgba(233, 236, 234, .07);
    --line: #2b312e; --line-strong: #3b433f;
    --ink: #e9ecea; --ink-2: #b9c0bc; --muted: #98a19c;
    --ac: var(--ac-d); --ac-fg: #0c1611; --ac-soft: var(--ac-soft-d); --ac-line: var(--ac-line-d); --ac-hover: var(--ac-hover-d);
    --danger: #ff8f7a; --danger-soft: #4a221b;
    --warn: #ffd98a; --warn-soft: #4a3a14; --warn-bar: #d99a2b;
    --info: #7fb2f7; --info-soft: #1e3050;
    --badge: #d9432f;
    --shadow: 0 16px 48px rgba(0, 0, 0, .55);
    --shadow-sm: 0 6px 20px rgba(0, 0, 0, .45);
    --logo: #ffffff;
    --story: #0f2620;
    color-scheme: dark;
  }
}

/* ---------- 2. 글자 ---------- */
:root { --font-ko: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif; }
:root[data-font="system"] { --app-font: var(--font-ko); }
:root[data-font="clean"] { --app-font: "Helvetica Neue", "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", Arial, sans-serif; }
:root[data-font="rounded"] { --app-font: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; }
:root[data-font="serif"] { --app-font: "Iowan Old Style", "AppleMyungjo", "Nanum Myeongjo", "Noto Serif KR", Georgia, serif; }
:root[data-size="small"] { --chat-font: 13px; --ui-font: 13px; }
:root[data-size="normal"] { --chat-font: 14px; --ui-font: 14px; }
:root[data-size="large"] { --chat-font: 16px; --ui-font: 15px; }
:root[data-size="xlarge"] { --chat-font: 18px; --ui-font: 16px; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--app-font, var(--font-ko));
  font-size: var(--ui-font, 14px);
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
}
h1, h2, h3, strong, b { letter-spacing: -0.01em; }
button, input, textarea, select { font-family: inherit; }

/* ---------- 3. 기본 요소 ---------- */
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
}
::placeholder { color: var(--muted); opacity: 1; }
::selection { background: var(--ac-soft); color: var(--ink); }

input, textarea, select {
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  background: var(--raised);
  color: var(--ink);
  font-size: var(--ui-font, 14px);
  line-height: 1.5;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, textarea:focus, select:focus { border-color: var(--ac); box-shadow: 0 0 0 1px var(--ac); outline: none; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ac); }
textarea { line-height: 1.6; }
select { padding-right: 32px; }
label { font-size: 12px; font-weight: 600; color: var(--ink-2); margin: 16px 0 0; }
label input, label textarea, label select { margin-top: 6px; color: var(--ink); font-weight: 400; }

button { border: 0; transition: background-color .12s, color .12s, border-color .12s; }
.primary {
  background: var(--ac); color: var(--ac-fg);
  min-height: 38px; padding: 8px 16px;
  font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.primary:hover { background: var(--ac-hover); }
.secondary {
  background: var(--raised); color: var(--ink);
  border: 1px solid var(--line-strong);
  min-height: 38px; padding: 8px 14px;
  font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.secondary:hover { background: var(--bg-2); border-color: var(--muted); }
.secondary .ico { color: var(--ac); }
.link { background: none; color: var(--ac); font-weight: 600; padding: 8px; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.primary.small, .secondary.small { min-height: 32px; padding: 5px 12px; font-size: 12px; }
.link.small { font-size: 12px; padding: 6px 8px; }
.button-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.work-button:active, .secondary:active, .primary:active { filter: brightness(.94); }
button:disabled { cursor: not-allowed; opacity: .5; }

.muted { color: var(--muted); line-height: 1.7; }
.small { font-size: 12px; line-height: 1.7; }
.error { color: var(--danger); font-size: 13px; }
.danger-text { color: var(--danger); }
.section-label {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--muted);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.field-hint { font-size: 12px; color: var(--muted); line-height: 1.55; }
.check-row { font-size: 13px; color: var(--ink); gap: 10px; }
.check-row input[type="checkbox"] { width: 16px; height: 16px; }
.check-row:has(input[type="checkbox"]:checked) { background: var(--ac-soft); box-shadow: inset 3px 0 0 var(--ac); }
.check-row:has(input[type="checkbox"]) { padding: 6px 8px; margin-left: -8px; margin-right: -8px; }
.dot { background: var(--ac); }

/* ---------- 4. 로그인 ---------- */
.auth-shell { background: var(--bg); }
.auth-story { background: var(--story); background-image: none; color: #f2f6f4; }
.auth-story p { opacity: .8; }
.auth-story .eyebrow { color: #8fd7b8; }
.story-line { background: #6ecba3; }
.auth-story h1 { font-weight: 600; letter-spacing: -0.02em; }
.pill { background: var(--ac-soft); color: var(--ac); font-weight: 600; padding: 5px 10px; }
.auth-card h2 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.auth-card > .primary { min-height: 42px; font-size: 14px; }

/* ---------- 5. 사이드바 ---------- */
#workspace { grid-template-columns: 272px minmax(0, 1fr) 280px; background: var(--bg); }
@media (max-width: 1200px) { #workspace { grid-template-columns: 248px minmax(0, 1fr); } }
@media (min-width: 1201px) { #workspace.info-closed { grid-template-columns: 272px minmax(0, 1fr); } }
#sidebar { background: var(--bg-2); border-right: 1px solid var(--line); padding: 18px 12px 0; }
#sidebar .brand { padding: 0 10px; gap: 10px; font-weight: 600; }
.brand-logo { height: 20px; color: var(--logo); }
.brand > span:last-child { font-size: 12px; font-weight: 500; color: var(--muted); opacity: 1; }
.workspace-label { margin: 16px 10px 14px; font-size: 11px; color: var(--muted); }
#sidebar .section-label { margin: 0 10px 6px; min-height: 28px; }
#sidebar button.labeled { min-height: 24px; padding: 0 8px; font-size: 11px; font-weight: 700; background: var(--ac-soft); color: var(--ac); gap: 4px; }
#sidebar button.labeled:hover { background: var(--ac); color: var(--ac-fg); }
#sidebar button.labeled .ico { width: 13px; height: 13px; stroke-width: 2.2; }
.search-label { margin: 0 0 8px; }
.search-label input { padding: 8px 10px; font-size: 13px; background: var(--raised); border-color: var(--line); min-height: 34px; }
#rooms { padding: 0; }
.room {
  align-items: center; gap: 10px;
  min-height: 52px; padding: 8px 10px; margin: 0 0 2px;
  color: var(--ink); background: transparent; font-weight: 500;
}
.room:hover { background: var(--hover); }
.room .hash { width: 26px; height: 26px; color: var(--muted); }
.room .hash .ico { width: 17px; height: 17px; }
.room .dm-avatar { width: 26px; height: 26px; font-size: 12px; }
.room .room-text { gap: 3px; }
.room-name { font-size: var(--ui-font, 14px); letter-spacing: -0.01em; }
.room .room-preview { color: var(--muted); }
.room .room-time { color: var(--muted); font-size: 11px; }
.room .room-side { gap: 5px; }
.room .muted-icon { font-size: 11px; opacity: .7; }
.badge {
  min-width: 18px; height: 18px; padding: 0 6px;
  display: inline-grid; place-items: center;
  background: var(--ac); color: var(--ac-fg);
  font-size: 11px; font-weight: 700; line-height: 1;
}
.badge.mention { background: var(--badge); color: #fff; }
.room-hint, .archived-link { color: var(--muted); font-size: 12px; margin: 8px 10px; }
.work-label { margin-top: 10px; }
.work-buttons { gap: 2px; }
.work-button {
  min-height: 38px; padding: 0 10px; gap: 10px;
  background: transparent; color: var(--ink);
  font-size: var(--ui-font, 14px); font-weight: 500;
}
.work-button:hover { background: var(--hover); color: var(--ink); }
.work-button .ico { color: var(--ac); }
.sidebar-bottom > .secondary { width: 100%; min-height: 34px; font-size: 13px; margin-top: 6px; }
.staff-button { margin-top: 6px; }
.profile { margin: 12px -12px 0; padding: 14px 16px; border-top: 1px solid var(--line); gap: 10px; }
.profile strong { font-size: 13px; font-weight: 600; }
.profile small { font-size: 11px; color: var(--muted); margin-top: 2px; }
.avatar { background: var(--ac-soft); color: var(--ac); font-weight: 600; width: 32px; height: 32px; font-size: 13px; }
#avatar, .mine .avatar { background: var(--ac); color: var(--ac-fg); }
.ai-avatar, .avatar.ai-avatar { background: var(--info-soft); color: var(--info); }

/* 선택된 항목 = 강조색 단색 채움 (대표 요청) */
.room.active, .work-button.active, .mention-box button.active, #mobile-nav button.active {
  background: var(--ac); color: var(--ac-fg); font-weight: 700; box-shadow: none;
}
.room.active:hover, .work-button.active:hover, #mobile-nav button.active:hover { background: var(--ac); color: var(--ac-fg); }
.room.active .room-name, .room.active .room-preview, .room.active .room-time, .room.active .hash, .room.active .muted-icon,
.work-button.active .ico, .mention-box button.active small { color: var(--ac-fg); opacity: .92; }
.room.active .room-name { opacity: 1; }
.room.active .badge { background: var(--ac-fg); color: var(--ac); }
.room.active .badge.mention { background: var(--ac-fg); color: var(--badge); }
.room.active .dm-avatar { background: var(--ac-fg); color: var(--ac); }

/* ---------- 6. 대화 헤더 ---------- */
.chat-header { height: 56px; padding: 0 16px 0 24px; gap: 12px; border-bottom: 1px solid var(--line); background: var(--bg); }
.room-symbol, #room-symbol { width: 32px; height: 32px; background: var(--ac-soft); border: 0; color: var(--ac); font-size: 15px; font-weight: 700; }
#room-symbol .ico { width: 18px; height: 18px; stroke-width: 2; }
.header-name h1 { font-size: calc(var(--ui-font, 14px) + 1px); font-weight: 600; margin: 0 0 2px; }
.header-name p { font-size: 12px; color: var(--muted); }
.people-chip { min-height: 30px; padding: 0 10px; border: 1px solid var(--line); background: var(--raised); color: var(--ink-2); font-size: 12px; font-weight: 500; }
.people-chip:hover { background: var(--bg-2); }
.connection { font-size: 12px; color: var(--muted); }
.connection::before { color: var(--ac); font-size: 9px; }
button.icon { color: var(--muted); }
button.icon:hover { background: var(--hover); color: var(--ink); }
#welcome { color: var(--muted); }
#welcome h2 { font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
#welcome .eyebrow { color: var(--ac); }
.welcome-symbol { color: var(--ac); font-size: 56px; margin-bottom: 24px; }

/* ---------- 7. 메시지 ---------- */
#message-scroll { padding: 20px 24px 8px; }
#older { color: var(--ac); font-size: 12px; }
.day {
  display: flex; align-items: center; gap: 12px;
  color: var(--muted); font-size: 11px; margin: 8px 0 18px;
}
.day::before, .day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.message { gap: 10px; margin-bottom: 18px; }
.message .avatar { width: 32px; height: 32px; font-size: 13px; }
.message-meta { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.message-meta time { color: var(--muted); font-size: 11px; margin-left: 8px; }
.edited-mark { color: var(--muted); }
.bubble {
  background: var(--bubble); border: 1px solid var(--line); color: var(--ink);
  padding: 10px 14px; line-height: 1.65; letter-spacing: -0.005em;
}
.mine .bubble { background: var(--ac-soft); border-color: var(--ac-line); color: var(--ink); }
.deleted .bubble { color: var(--muted); background: transparent; border-style: dashed; }
.message.flash .bubble { box-shadow: 0 0 0 3px var(--ac-line); }
.reply-quote { border-left: 2px solid var(--ac); background: var(--bg-2); color: var(--ink-2); font-size: 12px; }
.forwarded-label { color: var(--muted); font-size: 12px; }
.mention-chip { background: var(--ac-soft); color: var(--ac); font-weight: 700; padding: 0 3px; }
.mention-chip.me { background: var(--warn-soft); color: var(--warn); }
.unread-count { color: var(--warn); font-size: 11px; }
.reactions { gap: 4px; }
.reaction { border: 1px solid var(--line); background: var(--raised); color: var(--ink); font-size: 12px; padding: 2px 8px; }
.reaction.mine { border: 2px solid var(--ac); background: var(--ac-soft); padding: 1px 7px; }
.msg-tools { background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow-sm); padding: 2px; gap: 0; }
.msg-tools button { color: var(--ink-2); width: 30px; height: 30px; padding: 0; }
.msg-tools button:hover { background: var(--hover); color: var(--ac); }
.reaction-picker { background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.reaction-picker button:hover { background: var(--hover); }
.message-files img, .message-files video { border: 1px solid var(--line); background: var(--bg-2); }
.file-chip { border: 1px solid var(--line); background: var(--raised); color: var(--ink); font-size: 13px; }
.file-chip:hover { background: var(--bg-2); }
.file-chip small { color: var(--muted); }

/* 카드: 투표 · 결재 · AI 제안 */
.poll, .approval, .ai-action { background: var(--raised); border: 1px solid var(--line); color: var(--ink); padding: 14px; }
.poll-question { font-size: calc(var(--chat-font, 14px)); font-weight: 600; color: var(--ink); }
.poll-option { border: 1px solid var(--line); background: var(--raised); color: var(--ink); font-size: 13px; min-height: 36px; padding: 8px 12px; font-weight: 500; }
.poll-option.mine { border: 2px solid var(--ac); background: var(--ac-soft); font-weight: 700; padding: 7px 11px; }
.poll-bar { background: var(--bar); }
.poll-option.mine .poll-bar { background: transparent; }
.poll-text, .poll-count { color: var(--ink); }
.poll-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.poll-foot { color: var(--muted); font-size: 12px; }
.approval { border-left: 3px solid var(--ac); gap: 8px; }
.approval.rejected { border-left-color: var(--danger); }
.approval.cancelled { border-left-color: var(--line-strong); }
.approval-head strong { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.approval-kind { background: var(--ac-soft); color: var(--ac); font-size: 11px; font-weight: 700; padding: 2px 8px; }
.approval-status { font-size: 12px; font-weight: 700; color: var(--muted); }
.approval.pending .approval-status { color: var(--warn); }
.approval.approved .approval-status { color: var(--ac); }
.approval.rejected .approval-status { color: var(--danger); }
.approval-amount { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.approval-detail { color: var(--ink-2); line-height: 1.55; }
.approval-people, .approval-note { color: var(--muted); font-size: 12px; }
.approval-decide .reject { background: var(--danger-soft); color: var(--danger); font-weight: 600; }
.ai-action .status { color: var(--muted); font-size: 12px; }
.ai-action.confirmed { border-color: var(--ac-line); }
.ai-action .buttons button, .poll-foot button, .list-item button, .pin-bar button, .staff-actions button {
  background: var(--raised); color: var(--ink); border: 1px solid var(--line-strong);
  font-size: 12px; font-weight: 500; min-height: 30px; padding: 4px 10px;
}
.ai-action .buttons button:hover, .poll-foot button:hover, .list-item button:hover, .pin-bar button:hover, .staff-actions button:hover { background: var(--bg-2); }
.ai-action .buttons button.go { background: var(--ac); color: var(--ac-fg); border-color: var(--ac); font-weight: 600; }
.ai-action .buttons button.go:hover { background: var(--ac-hover); }
.staff-actions .danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.pin-bar button.done { background: transparent; border-color: transparent; color: var(--muted); }

/* 공지 막대 */
.pin-bar { margin: 12px 24px 0; padding: 8px 14px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font-size: 13px; }
.pin-bar .pin-text { font-weight: 500; }

/* ---------- 8. 입력창 ---------- */
#composer { margin: 0 24px 20px; padding: 10px 12px; border: 1px solid var(--line-strong); background: var(--raised); box-shadow: none; }
#composer:focus-within { border-color: var(--ac); box-shadow: 0 0 0 1px var(--ac); }
#composer textarea { min-height: 48px; padding: 6px 4px; font-size: var(--chat-font, 14px); line-height: 1.6; color: var(--ink); background: transparent; }
.composer-bottom { gap: 8px; }
.composer-bottom > span, .composer-bottom small { color: var(--muted); font-size: 11px; }
.composer-tools > span:not(.attach-wrap) { margin-left: 8px; }
.composer-tools .attach.tool { color: var(--muted); background: transparent; }
.composer-tools .attach.tool:hover { background: var(--hover); color: var(--ac); }
.composer-tools .ask-ai { color: var(--ac); }
.composer-tools .attach.tool.pressed, .composer-tools .attach.tool:active { background: var(--ac); color: var(--ac-fg); }
#send { min-height: 34px; padding: 0 14px; font-size: 13px; }
.compose-context { border-left: 2px solid var(--ac); background: var(--bg-2); color: var(--ink-2); font-size: 12px; }
.compose-context button { color: var(--muted); }
.mention-box { background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.mention-box button { color: var(--ink); font-size: 13px; }
.mention-box button:hover { background: var(--hover); }
.mention-box small { color: var(--muted); }
.attach-menu { background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.attach-menu button { color: var(--ink); border-bottom: 1px solid var(--line); font-size: 13px; }
.attach-menu button:hover { background: var(--hover); color: var(--ink); }
.attach-menu .ico { color: var(--ac); }
.pending-file { background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); font-size: 12px; }
.pending-file small { color: var(--muted); }
.pending-file.error small { color: var(--danger); }
#conversation.dragging { outline: 2px dashed var(--ac); outline-offset: -8px; }
#join-banner { background: var(--bg-2); border-top: 1px solid var(--line); color: var(--ink-2); font-size: 13px; }
#join-banner p { margin-bottom: 12px; }
.scroll-jumps button { border: 1px solid var(--line); background: var(--raised); color: var(--ac); box-shadow: var(--shadow-sm); }
.scroll-jumps button:hover { background: var(--ac-soft); }

/* ---------- 9. 방 정보 ---------- */
#info { background: var(--bg-2); border-left: 1px solid var(--line); padding: 18px 20px; color: var(--ink); }
#info .section-label { margin: 0 0 14px; }
#info .section-label .icon { margin: -8px -8px -8px 0; }
.info-symbol { width: 44px; height: 44px; margin-top: 4px; background: var(--ac-soft); color: var(--ac); font-size: 22px; font-weight: 700; }
#info h2 { font-size: 16px; font-weight: 600; margin: 14px 0 6px; }
#info-description { font-size: 13px; color: var(--muted); line-height: 1.6; }
.info-divider { background: var(--line); margin: 20px 0; }
.room-actions { margin: 8px 0 0; }
.room-buttons { gap: 6px; margin-top: 10px; }
.room-buttons .secondary.small { min-height: 30px; padding: 4px 10px; font-size: 12px; }
.room-buttons .link.small { color: var(--ink-2); }
.room-buttons .danger-text { color: var(--danger); }
#member-count { color: var(--ink); font-weight: 700; }
#presence-help { font-size: 11px; margin: -6px 0 14px; }
.member { gap: 10px; margin-bottom: 12px; font-size: 13px; }
.member .avatar { width: 28px; height: 28px; font-size: 12px; }
.member.clickable:hover { background: var(--hover); }
.member.clickable { margin: 0 -8px 4px; padding: 4px 8px; }
.member-detail { gap: 3px; }
.member-detail strong { font-size: 13px; font-weight: 600; color: var(--ink); }
.member-detail small { font-size: 11px; color: var(--muted); }
.member-detail .viewing { color: var(--ac); }
.member-detail .online { color: var(--ink-2); }
.viewing::before, .online::before { color: currentColor; }
.offline::before { color: var(--line-strong); }
.ai-empty { color: var(--muted); font-size: 12px; }
.ai-person { background: var(--raised); border: 1px solid var(--line); padding: 10px 12px; margin: 0; }
.ai-person small { color: var(--muted); }
#ai-settings { font-size: 12px; padding: 0 4px; }
#ai-permissions { font-size: 11px; line-height: 1.6; }
.info-note { background: var(--raised); border: 1px solid var(--line); color: var(--muted); font-size: 12px; margin-top: 24px; }
.info-note strong { color: var(--ink); font-weight: 600; }
.connection-note { background: var(--bg-2); border: 1px solid var(--line); font-size: 12px; color: var(--ink); }
.connection-note strong { color: var(--ink); }
.connection-note p { color: var(--muted); }

/* ---------- 10. 대화상자 ---------- */
dialog {
  width: min(480px, calc(100% - 32px)); padding: 24px;
  border: 1px solid var(--line); background: var(--raised); color: var(--ink);
  box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(10, 14, 12, .45); backdrop-filter: blur(2px); }
.dialog-head { margin-bottom: 8px; }
.dialog-head h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
dialog p { font-size: 13px; line-height: 1.6; }
dialog form > .primary, dialog > .primary { margin-top: 20px; }
dialog .dialog-actions { margin-top: 12px; }
.media-prefs { background: var(--bg-2); border: 1px solid var(--line); padding: 12px 14px; margin: 12px 0 0; }
.media-prefs .section-label { margin: 0 0 8px; }
.media-prefs .section-label small { font-weight: 500; letter-spacing: 0; color: var(--muted); }
.media-prefs .check-row { margin: 8px 0 0; padding: 0; box-shadow: none; background: transparent; }
.media-prefs .check-row > span { font-size: 13px; color: var(--ink); font-weight: 500; }
.media-prefs select { margin: 0; }
#theme-select { margin-top: 0; }
.appearance-preview { background: var(--raised); border: 1px solid var(--line); border-left: 3px solid var(--ac); color: var(--ink); }
.appearance-preview strong { font-weight: 600; }
.profile-photo-row .avatar.big { width: 64px; height: 64px; font-size: 24px; }
.tabs { gap: 4px; margin: 14px 0 12px; }
.tab { background: var(--bg-2); color: var(--ink-2); font-size: 12px; font-weight: 600; min-height: 32px; padding: 6px 14px; }
.tab:hover { background: var(--hover); }
.tab.active, .tab.active:hover { background: var(--ac); color: var(--ac-fg); }
.seg { border: 1px solid var(--line-strong); background: var(--raised); }
.seg button { color: var(--ink-2); border-right: 1px solid var(--line-strong); min-height: 30px; padding: 4px 12px; font-size: 12px; font-weight: 500; }
.seg button:hover { background: var(--hover); }
.seg button.active, .seg button.active:hover { background: var(--ac); color: var(--ac-fg); font-weight: 700; }
.picker { border: 1px solid var(--line); }
.picker label, .picker button { color: var(--ink); border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 500; }
.picker label:hover, .picker button:hover { background: var(--hover); }
.picker label:has(input:checked), .forward-rooms label:has(input:checked) { background: var(--ac-soft); box-shadow: inset 3px 0 0 var(--ac); }
.forward-rooms label { font-size: 13px; padding: 7px 8px; }
.search-hit { color: var(--ink); border-bottom: 1px solid var(--line); font-size: 13px; padding: 10px 8px; }
.search-hit:hover { background: var(--hover); }
.search-hit small { color: var(--muted); font-size: 12px; }
.search-hit mark { background: var(--warn-soft); color: var(--ink); }
.pin-item { border-bottom: 1px solid var(--line); }
.pin-item small { color: var(--muted); }
.files-list img, .files-list video { background: var(--bg-2); border: 1px solid var(--line); }
.forward-preview { background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); font-size: 13px; }
.schedule-item { border: 1px solid var(--line); background: var(--raised); font-size: 12px; }
.schedule-item time { color: var(--ac); }
.skill-group { border: 1px solid var(--line); background: var(--bg-2); }
.skill-group > strong { color: var(--ac); }
.staff-row { border-bottom: 1px solid var(--line); font-size: 13px; }
.approval-row { border: 1px solid var(--line); background: var(--raised); color: var(--ink); font-size: 13px; }
.approval-row:hover { background: var(--bg-2); }
.approval-row small { color: var(--muted); }
.list-item { border-bottom: 1px solid var(--line); font-size: 13px; padding: 10px 0; }
.list-item strong { font-weight: 600; }
.list-item small { color: var(--muted); font-size: 12px; margin-top: 2px; line-height: 1.5; }
.google-calendar-link { background: var(--info-soft); color: var(--info); border-color: transparent; }
.google-calendar-link:hover { background: var(--info-soft); filter: brightness(.96); }
.announce-box { border: 1px solid var(--line); background: var(--bg-2); }
.announce-box .secondary { margin-top: 12px; }
.quick-times .secondary.small { min-height: 30px; }
.small-head { font-size: 13px; font-weight: 600; color: var(--ink-2); }
#toast { background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 500; padding: 12px 18px; box-shadow: var(--shadow-sm); }
.family-kind { background: var(--bg-2); color: var(--ink); font-size: 12px; font-weight: 700; width: 44px; height: 44px; }
.family-kind.부고 { background: var(--ink); color: var(--bg); }
.receipt-summary { font-size: 13px; color: var(--ink-2); }
.receipt-summary strong { font-size: 15px; font-weight: 700; color: var(--ink); }
.receipt-list .warn { color: var(--warn); }
.device-wait { background: var(--bg-2); }
.device-card { background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow); }
.device-code { color: var(--ac); }
#staff-dialog p strong { color: var(--ink); }

/* 캘린더 */
.cal-toolbar { gap: 8px; margin: 14px 0 12px; }
.cal-toolbar #cal-title { font-size: 15px; font-weight: 600; min-width: 120px; text-align: center; }
.cal-toolbar #cal-prev, .cal-toolbar #cal-next { min-width: 32px; padding: 4px 8px; font-size: 16px; line-height: 1; }
.cal-grid { border: 1px solid var(--line); border-right: 0; border-bottom: 0; background: var(--line); gap: 0; }
.cal-grid .dow { background: var(--bg-2); color: var(--muted); font-size: 11px; font-weight: 700; padding: 8px 0; border-color: var(--line); }
.cal-day { background: var(--raised); color: var(--ink); border-color: var(--line); min-height: 86px; padding: 5px; }
.cal-day:hover { background: var(--bg-2); }
.cal-day.other { background: var(--bg-2); color: var(--muted); }
.cal-day .num { font-size: 12px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 5px; display: inline-grid; place-items: center; }
.cal-day.today .num { background: var(--ac); color: var(--ac-fg); }
.cal-day.selected, .cal-day.selected:hover { background: var(--ac-soft); box-shadow: inset 0 0 0 2px var(--ac); }
.cal-day .sun, .holiday-name { color: var(--danger); }
.cal-day .sat { color: var(--info); }
.cal-day.today .num.sun, .cal-day.today .num.sat { color: var(--ac-fg); }
.cal-day:has(.holiday-name) { background: var(--raised); }
.cal-chip { background: var(--ac-soft); color: var(--ac); font-size: 11px; font-weight: 500; padding: 1px 5px; }
.cal-chip.personal { background: var(--info-soft); color: var(--info); }
.cal-chip.leave { background: var(--warn-soft); color: var(--warn); }
.cal-count { color: var(--ac); }
.cal-day-head { background: var(--bg-2); border-bottom: 1px solid var(--line); }
.cal-hour { color: var(--ink); border-bottom: 1px solid var(--line); }
.cal-hour:hover { background: var(--hover); }
.cal-hour-label { color: var(--muted); border-right: 1px solid var(--line); }
.cal-grid.view-day { border: 1px solid var(--line); background: var(--raised); }
.cal-bottom { gap: 20px; margin-top: 16px; }
.cal-bottom > div { background: transparent; padding: 0; }
.cal-bottom .section-label { margin: 0 0 6px; }
.cal-tip { margin-top: 8px; }

/* 연차·휴가 */
.leave-today { background: var(--ac-soft); color: var(--ac); font-weight: 600; }
.leave-request { border: 1px solid var(--line); border-left: 3px solid var(--warn-bar); background: var(--raised); }
.leave-request small { color: var(--muted); }
.leave-balance { border: 1px solid var(--line); background: var(--raised); }
.leave-stat { border-right: 1px solid var(--line); padding: 14px 4px; }
.leave-stat b { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.leave-stat small { color: var(--muted); font-size: 12px; }
.leave-stat.left b { color: var(--ac); }
.leave-bar { background: var(--bar); }
.leave-bar .used { background: var(--ac); }
.leave-bar .waiting { background: var(--warn-bar); }
.leave-table { border: 1px solid var(--line); background: var(--raised); }
.leave-trow { border-bottom: 1px solid var(--line); font-size: 13px; }
.leave-trow.head { background: var(--bg-2); color: var(--muted); font-size: 11px; font-weight: 700; }
.leave-status { background: var(--ac-soft); color: var(--ac); font-size: 11px; font-weight: 700; padding: 3px 8px; }
.leave-status.pending { background: var(--warn-soft); color: var(--warn); }
.leave-status.rejected { background: var(--danger-soft); color: var(--danger); }
.leave-status.cancelled { background: var(--bg-2); color: var(--muted); }
.leave-card { border: 1px solid var(--line); background: var(--raised); }
.leave-card b { color: var(--ac); }

/* ---------- 11. 아이콘 ---------- */
.ico { stroke-width: 1.8; }
button.icon { width: 36px; height: 36px; min-width: 36px; }
button.icon .ico, .composer-tools .attach.tool .ico { width: 20px; height: 20px; }
.work-button .ico, .room .hash .ico { width: 18px; height: 18px; }

/* ---------- 12. 휴대폰 (700px 이하) ---------- */
@media (max-width: 700px) {
  #workspace { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  #sidebar.open { width: min(86vw, 320px); background: var(--bg-2); box-shadow: 16px 0 48px rgba(0, 0, 0, .35); bottom: calc(60px + env(safe-area-inset-bottom)); padding: 14px 12px 8px; }
  #sidebar.open .brand { padding: 0 6px; }
  #sidebar.open .room { min-height: 56px; padding: 8px 10px; }
  #sidebar.open .profile { margin: 8px -12px 0; padding: 12px 14px; }
  .chat-header { height: 52px; min-height: 52px; padding: 0 8px 0 6px; gap: 4px; }
  .chat-header .icon { min-width: 40px; min-height: 40px; width: 40px; height: 40px; padding: 0; }
  #toggle-rooms { color: var(--ink); }
  .header-name { padding-left: 2px; }
  .header-name h1 { font-size: 15px; }
  .header-name p { font-size: 11px; max-width: none; }
  #message-scroll { padding: 12px 12px 4px; }
  .message { gap: 8px; margin-bottom: 14px; }
  .message .avatar { width: 30px; height: 30px; font-size: 12px; }
  .message-body { max-width: 86%; }
  .bubble { padding: 9px 12px; }
  .pin-bar { margin: 8px 10px 0; padding: 9px 12px; min-height: 0; font-size: 13px; line-height: 1.45; }
  .pin-bar .pin-text { -webkit-line-clamp: 2; line-clamp: 2; font-weight: 500; }
  .pin-bar button { min-height: 34px; padding: 4px 10px; }
  #composer { margin: 4px 10px 6px; padding: 8px 10px; }
  #message-input { min-height: 42px; max-height: 110px; padding: 6px 4px; }
  .composer-bottom { gap: 6px; }
  .composer-tools { gap: 2px; }
  .composer-tools .attach.tool { width: 38px; height: 38px; min-width: 38px; min-height: 38px; }
  .composer-tools .attach.tool .ico { width: 21px; height: 21px; }
  #send { min-height: 36px; min-width: 64px; padding: 0 12px; }

  #mobile-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(60px + env(safe-area-inset-bottom));
    padding: 4px 6px env(safe-area-inset-bottom);
    gap: 4px;
    background: var(--bg-2);
    border-top: 1px solid var(--line);
    box-shadow: none;
    backdrop-filter: none;
  }
  #mobile-nav button { min-height: 52px; color: var(--muted); font-size: 11px; font-weight: 600; gap: 3px; }
  #mobile-nav button.active { background: var(--ac); color: var(--ac-fg); font-weight: 700; box-shadow: none; }
  #mobile-nav button.active .ico { stroke-width: 2.3; }
  #mobile-nav .ico { width: 22px; height: 22px; }

  dialog { padding: 20px 16px; }
  dialog:not(.wide-dialog):not(.image-viewer) { margin: auto auto calc(60px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 68px - env(safe-area-inset-bottom)); }
  dialog:not(.wide-dialog) .dialog-head::before { background: var(--line-strong); }
  dialog.wide-dialog { height: calc(100dvh - 60px - env(safe-area-inset-bottom)); padding: 14px 12px 24px; }
  dialog.wide-dialog .dialog-head { background: var(--raised); border-bottom: 1px solid var(--line); }
  dialog.wide-dialog .dialog-head h2 { font-size: 18px; }
  #calendar-dialog .cal-toolbar { background: var(--raised); border-bottom: 1px solid var(--line); }
  #calendar-dialog #cal-title { font-size: 16px; }
  .cal-grid { border: 1px solid var(--line); border-right: 0; border-bottom: 0; }
  .cal-day { min-height: 52px; padding: 5px 3px; }
  .cal-day .num { min-width: 26px; height: 26px; font-size: 13px; }
  .cal-day.selected { background: var(--ac-soft); box-shadow: inset 0 0 0 2px var(--ac); }
  .cal-count { color: var(--ac); font-size: 10px; font-weight: 700; }
  .cal-bottom > div { padding: 12px; background: var(--bg-2); border: 1px solid var(--line); }
  .cal-bottom .section-label { color: var(--ink); font-size: 13px; letter-spacing: 0; }
  .cal-day:has(.holiday-name) { background: var(--raised); }
  .seg button { min-height: 36px; font-size: 13px; }
  .leave-trow { font-size: 13px; }
  input, textarea, select { font-size: 16px; }
}
@media (max-width: 360px) {
  .composer-tools .attach.tool { width: 34px; min-width: 34px; }
  #send { min-width: 56px; padding: 0 10px; }
}

/* 각진 모서리: 전역 규칙(위)이 유지됩니다. 상태 점만 둥글게. */
.dot, .viewing::before, .online::before, .offline::before, input[type="radio"] { border-radius: 50% !important; }

/* ======================================================================
   AI 1:1 대화 — ChatGPT처럼 AI와 나만 보는 대화 (features/ai-chats.js)
   ====================================================================== */
.room-group { margin: 14px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }

/* 입력창 옆: 답할 AI 고르기 */
.ai-model { height: 34px; max-width: 200px; margin: 0; padding: 0 26px 0 10px; font-size: 12px; border: 1px solid var(--line-strong); background-color: var(--raised); color: var(--ink); }

/* 답변을 쓰는 중 · 실패하면 다시 시도 */
.ai-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 2px 0 16px; color: var(--ink-2); font-size: 13px; }
.ai-status[hidden] { display: none; }
.ai-status .avatar { width: 32px; height: 32px; font-size: 12px; flex: none; }
.ai-status.failed .error { flex: 1; min-width: 0; }
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots i { width: 5px; height: 5px; background: var(--ac); border-radius: 50% !important; animation: vac-typing 1.2s infinite ease-in-out; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes vac-typing { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .typing-dots i { animation: none; opacity: .7; } }
.ai-model-tag { margin-left: 8px; font-size: 11px; font-weight: 500; color: var(--muted); }

/* AI 답변 서식 (제목·목록·표·코드) */
.bubble.md { white-space: normal; }
.bubble.md > * + * { margin-top: 8px; }
.bubble.md p { margin: 0; }
.md-h { font-weight: 700; color: var(--ink); line-height: 1.5; }
.md-h1 { font-size: 1.15em; }
.md-h2 { font-size: 1.08em; }
.md-list { display: flex; flex-direction: column; gap: 3px; }
.md-li { display: flex; gap: 8px; }
.md-li.d1 { padding-left: 18px; }
.md-li.d2 { padding-left: 36px; }
.md-li.d3 { padding-left: 54px; }
.md-marker { flex: none; min-width: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.md-item { min-width: 0; }
.bubble.md blockquote { margin: 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--ac-line); color: var(--ink-2); }
.bubble.md hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.bubble.md code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; background: var(--hover); padding: 1px 5px; }
.bubble.md a { color: var(--ac); text-decoration: underline; overflow-wrap: anywhere; }
.md-code { border: 1px solid var(--line); background: var(--bg-2); }
.md-code-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 4px 3px 10px; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.md-copy { min-height: 26px; padding: 0 9px; font-size: 11px; background: transparent; border: 1px solid var(--line-strong); color: var(--ink-2); }
.md-copy:hover { border-color: var(--ac); color: var(--ac); }
.md-code pre { margin: 0; padding: 10px 12px; overflow-x: auto; white-space: pre; }
.bubble.md .md-code pre code { background: none; padding: 0; font-size: 12.5px; line-height: 1.55; }
.md-table { overflow-x: auto; }
.bubble.md table { border-collapse: collapse; font-size: .95em; }
.bubble.md th, .bubble.md td { border: 1px solid var(--line-strong); padding: 5px 9px; text-align: left; vertical-align: top; }
.bubble.md th { background: var(--bg-2); font-weight: 700; }

/* AI 대화: 답변이 길어 말풍선을 넓게 */
.ai-chat-room .message:not(.mine) .message-body { max-width: calc(100% - 42px); }
.ai-chat-room .unread-count { display: none; } /* 나 혼자 보는 대화라 읽음 숫자는 의미 없음 */

/* 새 AI 대화 첫 화면 */
.ai-welcome { max-width: 580px; margin: 7vh auto 24px; padding: 0 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ai-welcome-mark { width: 48px; height: 48px; display: grid; place-items: center; background: var(--ac-soft); color: var(--ac); }
.ai-welcome-mark .ico { width: 26px; height: 26px; }
.ai-welcome h2 { margin: 4px 0 0; font-size: 20px; color: var(--ink); }
.ai-welcome p { margin: 0; line-height: 1.6; }
.ai-starters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; margin: 8px 0; }
.ai-starter { min-height: 48px; padding: 10px 12px; text-align: left; font-size: 13px; line-height: 1.45; border: 1px solid var(--line-strong); background: var(--raised); color: var(--ink); }
.ai-starter:hover { border-color: var(--ac); background: var(--ac-soft); }

/* AI 설정 창: AI 대화에서는 방 전용 항목을 숨김 */
#ai-dialog.ai-chat-mode .room-only { display: none; }

@media (max-width: 700px) {
  .ai-starters { grid-template-columns: 1fr; }
  .ai-welcome { margin-top: 3vh; }
  .ai-model { max-width: 150px; }
  .ai-chat-room .message:not(.mine) .message-body { max-width: calc(100% - 36px); }
}