:root{
  --bg:#0f172a;
  /* slate-900 */
  --panel:#111827;
  /* gray-900 */
  --soft:#1f2937;
  /* gray-800 */
  --muted:#334155;
  /* slate-700 */
  --muted-2:#64748b;
  /* slate-500 */
  --fg:#e5e7eb;
  /* gray-200 */
  --accent:#22c55e;
  /* green-500 */
  --accent-2:#06b6d4;
  /* cyan-500 */
  --danger:#ef4444;
  /* red-500 */
  --shadow: 0 10px 25px rgba(0,0,0,.35);
  --radius: 16px;
}
*{
  box-sizing:border-box}
html,body{
  height:100%;
}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--fg);
  background:linear-gradient(120deg, #0b1023, #0a1329 40%, #0e1533);
}
.app{
  display:grid;
  grid-template-rows: auto 1fr auto;
  height:100dvh;
  gap:12px;
  padding:12px;
}
/* Header */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  background:var(--panel);
  border:1px solid #1e293b;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
header h1{
  margin:0;
  font-size:1.05rem;
  letter-spacing:.3px;
  font-weight:650}
.tag{
  padding:4px 10px;
  border-radius:999px;
  font-size:.8rem;
  background:rgba(34,197,94,.15);
  color:#86efac;
  border:1px solid rgba(34,197,94,.35)}
.tag.logged-out {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.35);
}
/* Main layout: Sidebar 25% | Main 75% */
.main{
  display:grid;
  grid-template-columns: 1fr 3fr;
  gap:12px;
  min-height:0;
}
/* Sidebar */
.sidebar{
  background:var(--panel);
  border:1px solid #1e293b;
  border-radius:var(--radius);
  padding:10px;
  display:flex;
  flex-direction:column;
  min-height:0;
  box-shadow:var(--shadow);
}
.sidebar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:2px 6px 8px}
.sidebar-head h2{
  margin:0;
  font-size:.95rem;
  color:#cbd5e1}
.journal-list{
  flex:1;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-right:4px}
.journal-item{
  background:linear-gradient(180deg, #0f172a, #0d182c);
  border:1px solid #1f2a3d;
  border-radius:12px;
  padding:10px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  min-height:64px;
  height:10%;
  /* ~10% of sidebar height */
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.journal-item:hover{
  transform: translateY(-2px);
  border-color:#2c3c54;
  background:linear-gradient(180deg, #101b34, #0e1b34)}
.journal-title{
  font-weight:600;
  font-size:.95rem;
  color:#e2e8f0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis}
.journal-meta{
  font-size:.78rem;
  color:#94a3b8}
.new-entry{
  margin-top:10px;
  display:flex;
  gap:8px
}
.btn{
  appearance:none;
  border:1px solid #223049;
  background:#122036;
  color:#d1d5db;
  padding:10px 12px;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
  transition:transform .12s ease, background .2s ease, border-color .2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,.2)}
/* Disabled state */
.btn:disabled,
.btn[disabled] {
  opacity: 0.5;              /* fade it */
  cursor: not-allowed;       /* show blocked cursor */
  transform: none;           /* remove hover lift */
  box-shadow: none;          /* flatter look */
  background: #0b1223;       /* darker, inactive tone */
  border-color: #1e293b;
  color: #64748b;
}

/* Prevent hover effects on disabled buttons */
.btn:disabled:hover,
.btn[disabled]:hover {
  transform: none;
  background: #0b1223;
  border-color: #1e293b;
}
.btn:hover{
  transform: translateY(-1px);
  background:#142742;
  border-color:#2e3e58}
.btn.primary{
  background: linear-gradient(180deg, #1b4332, #0b3b2d);
  border-color:#1b5e37;
  color:#bbf7d0}
.btn.primary:hover{
  background: linear-gradient(180deg, #1d4d37, #0e4634)}
.btn.secondary {
  background: linear-gradient(180deg, #1e3a8a, #1e40af); /* blue-800 → blue-700 */
  border-color: #1d4ed8; /* blue-700 */
  color: #bfdbfe; /* blue-200 */
}
.btn.secondary:hover {
  background: linear-gradient(180deg, #1e40af, #2563eb); /* slightly brighter on hover */
}
.btn.ghost{
  background:transparent;
  border:1px dashed #2b3a52;
  color:#a5b4fc }
.btn.danger{
  background:linear-gradient(180deg,#3b0b0b,#2a0b0b);
  border-color:#7f1d1d;
  color:#fecaca }
/* Chat (Main Area A) */
.chat-wrap{
  position:relative;
  background:var(--panel);
  border:1px solid #1e293b;
  border-radius:var(--radius);
  display:flex;
  flex-direction:column;
  min-height:0;
  box-shadow:var(--shadow);
}
.chat-log{
  flex:1;
  overflow:auto;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  scroll-behavior:smooth }
.msg{
  max-width:75%;
  padding:10px 12px;
  border-radius:14px;
  background:#0b1223;
  border:1px solid #1a2540;
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
  gap:6px
}
.msg.ai{
  align-self:flex-start;
  background:linear-gradient(180deg,#0a1222,#0a1426);
  border-color:#1c2b43 }
.msg.user{
  align-self:flex-end;
  background:linear-gradient(180deg,#0f2039,#0e2141);
  border-color:#2a3c63 }
.msg .text{
  line-height:1.35 }
.msg .time{
  font-size:.75rem;
  color:#94a3b8 }
.chat-input{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border-top:1px solid #1e293b;
  background:linear-gradient(180deg,#0d1326,#0b1223);
  border-bottom-left-radius:var(--radius);
  border-bottom-right-radius:var(--radius)
}
.chat-input input[type="text"]{
  flex:1;
  padding:12px 14px;
  border-radius:12px;
  background:#0b1630;
  color:var(--fg);
  border:1px solid #24344f;
  outline:none;
  font-size:1rem;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.25)
}
.chat-input input[type="text"]::placeholder{
  color:#70819a }
.send-btn{
  width:10%;
  min-width:88px }
.end-btn{
  width:10%
  min-width: 66px
}
/* Journal Edit overlay covering Main Area (75%) */
.editor-overlay{
  position:absolute;
  inset:0;
  display:none;
  /* toggled */
  background:rgba(2,6,23,.6);
  backdrop-filter: blur(6px);
  border-radius:var(--radius);
  align-items:center;
  justify-content:center;
  padding:18px;
}
.editor{
  width:min(900px, 90%);
  max-height:90%;
  background:linear-gradient(180deg,#0f172a,#0b1327);
  border:1px solid #213149;
  border-radius:18px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  overflow:hidden
}
.editor header{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:14px 16px;
  border-bottom:1px solid #1e293b}
.editor .fields{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:auto }
.row{
  display:flex;
  gap:10px }
.row label{
  min-width:68px;
  color:#cbd5e1;
  padding-top:10px }
.row input,
.row textarea{
  flex:1;
  background:#0a142b;
  color:#e2e8f0;
  border:1px solid #2a3b59;
  border-radius:12px;
  padding:12px 14px;
  outline:none;
  font-size:1rem;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.25);
}
.row textarea{
  min-height:220px;
  white-space:pre-wrap }
.editor .actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding:12px 16px;
  border-top:1px solid #1e293b;
  background:#0b1223 }
/* Footer */
footer{
  background:var(--panel);
  border:1px solid #1e293b;
  border-radius:var(--radius);
  padding:12px;
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
  box-shadow:var(--shadow);
}
.progress{
  position:relative;
  flex:1;
  height:12px;
  background:#0b1630;
  border:1px solid #223049;
  border-radius:999px;
  overflow:hidden }
.progress > .bar{
  position:absolute;
  inset:0;
  width:0%;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow:0 6px 18px rgba(6,182,212,.35) inset }
.progress-label{
  min-width:110px;
  text-align:right;
  font-size:.9rem;
  color:#cbd5e1 }
.new-entry {
  justify-content: space-between;
}

/* Responsive tweaks */
@media (max-width: 1024px){
  .main{
    grid-template-columns: 1fr;
  }
  .send-btn{
    min-width:84px }
}
.word-donut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
}
.word-donut svg {
  display: block;
}
.word-donut .center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: #e5e7eb;
  user-select: none;
  font-variant-numeric: tabular-nums;
}
.lock-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  background: rgba(239, 68, 68, 0.15); /* red tint */
  color: #fecaca;
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.lock-badge.unlocked {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.analysisOutputArea {
  border: 1px solid #2a3b59;
  border-radius: 12px;
  padding: 12px 14px;
  max-height: 300px;
  overflow-y: auto;
  background: #0a142b;
  color: #e2e8f0;

  font-size: 1rem;
  line-height: 1.5;

  white-space: pre-wrap;   /* preserves line breaks */
  word-break: break-word;  /* prevents overflow */

  box-shadow: inset 0 2px 8px rgba(0,0,0,.25);
}


.analysisOutputArea.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Kuraija added for table */
#analysisInput_table {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow-x: auto;
  white-space: normal;
}

.analysis-table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 0.6fr 2fr;
  min-width: 720px;
  border-bottom: 1px solid #1e293b;
  background: #0a142b;
}

.analysis-table-row:nth-child(even) {
  background: #0b1630;
}

.analysis-table-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #111827;
  color: #fde68a;
  font-weight: 800;
}

.analysis-table-cell {
  padding: 10px 12px;
  border-right: 1px solid #1e293b;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.analysis-table-cell:last-child {
  border-right: none;
}

.analysis-table-impact,
.analysis-table-count {
  text-align: center;
}

.analysis-table-count {
  font-weight: 800;
  color: #86efac;
}


  /*END Kuraija added for table*/


.instructions-content {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}
/*Kuraija: added this stuff below*/
/*close button in chat view*/
#backToListBtn {
  display: none;
}

/* Hide analysis/table toggle on desktop */
#toggleAnalysisViewBtn {
  display: none !important;
}
















































/*000000000000000000000000000000000000000000000000000000*/
/*Kuraija edit for phones START here*/

@media (max-width: 1024px) {

  /* Default: Hide chat, show sidebar */
  .chat-wrap { display: none !important; }
  .sidebar { display: flex !important; width: 100% !important; }
  /* Default mobile: Hide chat, show sidebar */
  .chat-wrap { display: none; }
  .sidebar { display: flex; }

 /* Active: Show chat, hide sidebar */
  .main.show-chat .chat-wrap { display: flex !important; }
  .main.show-chat .sidebar { display: none !important; }
    /* Ensures main doesn't try to be a 2-column grid */
  .main { grid-template-columns: 1fr !important; }


/*Start of mobile editor styles*/

 /*Make editor full-screen on mobile*/
.editor .fields {
    flex: 1 !important; /* Forces the fields area to grow[cite: 1] */
    display: flex !important;
    flex-direction: column !important;
    padding: 10px !important;
}

/*
  /*Make editor full-screen on mobile*/
.editor {
    width: 100% !important; /* Fill horizontal space */
    max-width: 100vw !important; /* Hard limit to screen width */
    box-sizing: border-box !important; /* Includes padding in width calculation */
    max-height: 100% !important; /* Fill vertical space */
    height: 100% !important;
    border-radius: 0 !important; /* Square corners for full-screen look */
    border: none !important;
    display: flex !important;
    
    overflow-y: auto !important; /* The editor itself becomes the scrollable area */
    overflow-x: hidden !important; /* Kills horizontal scroll */
    margin: 0 !important;
    align-content: flex-start !important;
    /*below new stuff for buttons*/
}

  
  /*Kuraija added for table start*/
  .analysis-table-row {
    grid-template-columns: 1.8fr 1fr 0.6fr 2fr;
    min-width: 640px;
    font-size: 0.85rem;
  }

  .analysis-table-cell {
    padding: 8px 10px;
  }
  /*Kuraija added for table END*/



/* 2. Move the .actions div to the very top visually */
.actions {
    /*order: -1 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10002 !important;
    background: var(--panel) !important;
    padding: 15px !important;
    border-bottom: 1px solid var(--border) !important;*/
    /*below to make buttons side by side*/
     /*flex: 0 0 50% !important;       Take exactly the other half */
    margin: 0 !important;
    padding: 8px 12px !important;
    display: flex !important;
    justify-content: flex-end !important; /* Align buttons to the right[cite: 1] */
    background: var(--panel) !important;
    box-sizing: border-box !important;
}

/* 3. Ensure the fields area takes up the remaining space */
.fields {
    /*order: 1 !important;
    flex: 1 !important;/*
    /*below is to make buttons side by side*/
     /* flex: 0 0 100% !important;     Force fields to take full width and move to a new line[cite: 1] */
    padding: 10px !important;
}

.editor-overlay {
    position: fixed !important; /* Breaks out of the .app padding[cite: 1] */
    inset: 0 !important;        /* Forces it to all four edges[cite: 1] */
    width: 100vw !important;    /* Full viewport width[cite: 1] */
    height: 100dvh !important;  /* Full dynamic viewport height[cite: 1] */
    z-index: 10000 !important;  /* Ensures it stays above the header and footer[cite: 1] */
    padding: 0 !important;      /* Removes the inner gap[cite: 1] */
    overflow: hidden !important; /* Prevents the overlay itself from shifting */
}
/*Puts row elements in column layout on mobile*/
.row {
    flex-direction: column !important; /* Stacks label and input vertically[cite: 1] */
    align-items: flex-start !important; /* Aligns them to the left[cite: 1] */
    gap: 4px !important; /* Reduces space between label and input[cite: 1] */
}

.row label {
    min-width: unset !important; /* Removes the laptop-size fixed width[cite: 1] */
    padding-top: 0 !important; /* Removes top padding used for alignment[cite: 1] */
}


#titleInput, 
#bodyInput,
.row input, 
.row textarea {
    width: 100% !important; /* Forces inputs to span the full container width[cite: 1] */
    flex: none !important;  /* Prevents the browser from shrinking them[cite: 1] */
}
#bodyInput {
    flex: 1 !important; /* Makes the textarea fill the rest of the screen[cite: 1] */
    min-height: 60dvh !important; /* Ensures it is large on the Samsung device[cite: 1] */
}

/*removes scrollable option from input area*/
#bodyInput {
    overflow-y: hidden !important; /* Prevents internal scrollbar */
    resize: none !important;      /* Removes the manual resize handle */
    min-height: 200px !important;  /* Sets a decent starting height[cite: 1] */
    height: auto;
}

/* Configure the Header (Left side) */
.editorHeader {
    /*order: 1 !important;
    width: 50% !important;
    padding: 8px 12px !important; 
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    background: var(--panel) !important;*/
    /*below to keep buttons on a side*/
    flex: 0 0 50% !important;       /* Take exactly half the width */
    margin: 0 !important;
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    background: var(--panel) !important;
    box-sizing: border-box !important;
}
/*puts buttons above editor*/
.actions {
    /*order: 2 !important;*/  /*removed order to specifu seperate one for each*/
    width: 50% !important;
    padding: 8px 12px !important; /* Smaller padding as requested */
    display: flex !important;
    justify-content: flex-end !important; /* Push buttons to the right */
    gap: 8px !important;
    background: var(--panel) !important;
    border: none !important; /* Remove borders to blend with header */
}

/* Ensures the fields area takes up the remaining space */
.fields {
    order: 3 !important;
    width: 100% !important;
    flex: 1 1 100% !important;
}

/*reorder buttons*/
#saveEntryBtn { order: 2 !important; }
#cancelEditBtn { order: 1 !important; }

/* Keeps the new "Top Bar" sticky together */
.editor-header, .actions {
  
    z-index: 10005 !important;
}

/*below are edits for analysis page !!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

#analysisNotification {
    display: block !important;
    width: 100% !important;
    margin: 6px 0 0 0 !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    background: rgba(250, 204, 21, 0.12) !important;
    border: 1px solid rgba(250, 204, 21, 0.35) !important;
    color: #fde68a !important;
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

/*below is general adjustment to make app fit screen not be bigger*/
/* actually for now there is nothing */


/*below is phone adjustment for login page*/


/* 1. Force the overlay to ignore the .app grid positioning */
#authOverlay {
    grid-column: 1 / -1 !important; /* Spans all grid columns */
    grid-row: 1 / -1 !important;    /* Spans all grid rows */
    margin: -12px !important;       /* Negates the .app padding */
    width: 100vw !important;
    left: 0 !important;
    top: 0 !important;
}

/* 2. Fix the specific Auth Fields so they aren't fighting multiple .fields rules */
#authFields {
    display: block !important;       /* Standard block flow is safer here[cite: 1] */
    width: 100% !important;
    flex: none !important;           /* Stop the flex-grow/shrink battle[cite: 1] */
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* 3. Ensure the inner Login/Register forms fill that block */
#authFields > div {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Default State: Show Login, Hide Register */
#loginFields { display: flex !important; }
#registerFields { display: none !important; }

/* Active State: Switch visibility when class is present */
#authEditor.show-register #loginFields { display: none !important; }
#authEditor.show-register #registerFields { display: flex !important; }

/* Force them to be full width when they are visible */
#loginFields, #registerFields {
    width: 100% !important;
    flex-direction: column !important;
}

/*make any text in buttons fit button*/
#authEditor .actions .btn {
    width: auto !important;          /* Remove the 100% or flex: 1 width */
    min-width: fit-content !important; /* Ensures it is at least as wide as the text */
    padding: 0 15px !important;      /* Adds horizontal breathing room for the text */
    flex: 0 1 auto !important;       /* Allows it to shrink/grow based on content only[cite: 1] */
    white-space: nowrap !important;  /* Prevents the text from wrapping to a second line */
}

/* Adjust the container to let them sit naturally */
#authEditor .actions {
    justify-content: center !important; /* Centers the buttons in the bar */
    gap: 10px !important;              /* Keeps them from touching */
}

/* Hide the main 'Account' title on mobile */
#authTitle {
    display: none !important;
}

/* JOURNAL EDITOR MOBILE FINAL OVERRIDES */

body.journal-editor-open {
    overflow: hidden !important;
    width: 100% !important;
    height: 100dvh !important;
  }

  #editorOverlay {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;
    min-width: 100vw !important;
    min-height: 100dvh !important;

    z-index: 100000 !important;
    padding: 0 !important;
    margin: 0 !important;

    border-radius: 0 !important;
    background: #0f172a !important;

    overflow: hidden !important;
    align-items: stretch !important;
    justify-content: stretch !important;

    pointer-events: auto !important;
  }

  #journalEditor {
    width: 100vw !important;
    height: 100dvh !important;
    min-width: 100vw !important;
    min-height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 0 !important;
    border: none !important;

    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #journalEditor .editorHeader {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;

    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;

    margin: 0 !important;
    padding: 10px 12px !important;

    border-radius: 0 !important;
    background: #111827 !important;
    box-sizing: border-box !important;
  }

  #journalEditor .fields {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;

    padding: 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    box-sizing: border-box !important;
  }

  #journalEditor .actions {
    /*flex: 0 0 auto !important;*/
    width: 100% !important;
    height: auto !important;

    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;

    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;

    margin: 0 !important;
    padding: 10px 12px !important;

    border-radius: 0 !important;
    border-top: 1px solid #1e293b !important;
    background: #0b1223 !important;

    box-sizing: border-box !important;
  }

  #journalEditor .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
  }

  #journalEditor .row label {
    min-width: 0 !important;
    width: 100% !important;
    padding-top: 0 !important;
  }

  #titleInput,
  #bodyInput {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    box-sizing: border-box !important;
  }

  #bodyInput {
    min-height: 45dvh !important;
    overflow-y: auto !important;
    resize: none !important;
  }

#editorOverlay {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;

    z-index: 999999 !important;
    background: #0f172a !important;
  }

   #chatWrap {
    position: static !important;
    overflow: visible !important;
    transform: none !important;
  }

  .app,
  .main {
    overflow: visible !important;
    transform: none !important;
  }

  html,
  body {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .app {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

/*below is for analysis page */


  #analysisOverlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #analysisEditor {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }


  #analysisHeader {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #analysisTitle {
    margin: 0 !important;
    font-size: 1.2rem !important;
    line-height: 1.2 !important;
  }

#analysisTextRow,
#frequencyTableRow {
  align-items: stretch !important;
  width: 100% !important;
}

#analysisInput_text,
#analysisInput_table {
  width: 100% !important;
  box-sizing: border-box !important;
}
  

 /*block below hides Frequence table*/
  #analysisFields {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 12px !important;
  }

  #analysisTextRow {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #analysisInput_text {
    flex: 1 1 auto !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  #frequencyTableRow {
    display: none !important;
  }
 /*end of block that hides Frequence table*/

  #analysisActions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px !important;
    width: 100% !important;
  }

  #analysisActions .btn {
    min-width: auto !important;
    padding: 8px 10px !important;
    font-size: 0.85rem !important;
  }

  #analysisActions #toggleAnalysisViewBtn {
    min-width: 125px !important;
    flex: 0 0 125px !important;
  }

/*Below - to make analusis content switchable*/

  #analysisEditor.show-table #analysisTextRow {
    display: none !important;
  }

  #analysisEditor.show-table #frequencyTableRow {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #analysisEditor.show-table #analysisInput_table {
    flex: 1 1 auto !important;
    max-height: none !important;
    overflow-y: auto !important;
  }
  
  /* Show analysis/table toggle only on phone/tablet */
#toggleAnalysisViewBtn {
  display: inline-flex !important;
}

/*below is for Login page*/
/*below is for buttons size on login page*/


  #authEditor .actions {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;

    gap: 8px !important;
    padding: 10px 12px !important;

    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #authEditor .actions .btn {
    width: auto !important;
    min-width: auto !important;
    height: auto !important;

    padding: 8px 10px !important;
    font-size: 0.85rem !important;
    line-height: 1.2 !important;

    flex: 0 1 auto !important;
    white-space: nowrap !important;
  }

  /*Below is edit for Chat view*/
  /*button to close chat*/

  #backToListBtn {
    flex: 0 0 auto !important;
    padding: 10px 12px !important;
  }

  #chatInput {
    min-width: 0 !important;
  }

#backToListBtn {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    padding: 10px 12px !important;
  }

/*below fixes chat window overflow*/

/* Prevent chat from overflowing sideways on small phones */
.main,
#chatWrap,
#chatLog,
.chat-input {
  min-width: 0 !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

#chatLog .msg {
  max-width: 92% !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

#chatLog .text {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}

.chat-input {
  width: 100% !important;
  box-sizing: border-box !important;
}

#chatInput {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

#sendBtn,
#backToListBtn {
  flex: 0 0 auto !important;
}

/* Obnoxious important action button */
.btn.attention {
  background: linear-gradient(180deg, #facc15, #f97316) !important;
  border-color: #fb923c !important;
  color: #111827 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 18px rgba(250, 204, 21, 0.55) !important;
}

.btn.attention:hover {
  background: linear-gradient(180deg, #fde047, #fb923c) !important;
}




















}
@media (max-width: 768px) {

  /* Makes the main container a single column */
  .main {
    /*below is original style for it*/
    grid-template-columns: 1fr;
   /* display:grid;
  grid-template-columns: 1fr 3fr;
  gap:12px;
  min-height:0;*/

  }

  /* When the 'show-chat' class is added to the .main container, hide sidebar */
  .main.show-chat .sidebar {
    display: none; /* Hides the sidebar */
  }
  .main.show-chat .chat-wrap {
    display: flex; /* Shows the chat */
  }

   /* Default mobile state: show sidebar, hide chat */
  .sidebar {
    display: flex;
  }

  .chat-wrap {
    display: none;
  }
  
  
}





/*Kuraija edit for phones STOP here*/
/*0000000000000000000000000000000000000000000000000000000*/